单击图像时删除所有其他 div答案

【问题标题】：Remove all other div's on click of a image单击图像时删除所有其他 div
【发布时间】：2014-07-31 11:18:02
【问题描述】：

<label>Project Type </label>
    <div>
    <select name="category" id="category" class="form-control ">
        <option value="">Select Project Type</option>
        <option value="Independent_House">Independent House</option>
        <option value="Duplex_House">Duplex House</option>
        <option value="Pent_House">Pent House</option>
    </select>
    </div>

<div  class="cato" id="category_Independent_House" style="display:none">    
  <input type="button" id="addindependant" value="Add Property" />          
    <div id="cato_Independent_House">
      <div class="form-group">                  
        <label>Bed Rooms</label><label>Bath Rooms</label> 
      </div>
    </div>
  </div>
  <div  class="cato" id="category_Duplex_House" style="display:none">
  <input type="button" id="addduplex" value="Add Property" />   
    <div id="cato_Duplex_House">
      <div class="form-group">                  
        <label >Bed Rooms</label><label>Bath Rooms</label>
      </div>                        
    </div>
  </div>
  <div  class="cato" id="category_Pent_House" style="display:none">
  <input type="button" id="addpenthouse value="Add Property" />
    <div id="cato_Pent_House">
      <div class="form-group">                  
        <label >Bed Rooms</label><label>Bath Rooms</label>
       </div>
    </div>
        </div>

   <script type="text/javascript">
  js(function() {
   js('#addindependant').click(function(e){
   js('#cato_Independent_House').append('<div class="form-group submenu">
              <div ><select name="rooms[]" >
                    <option value="1">1BHK</option>
                    <option value="2">2BHK</option>
                    <option value="3">3BHK</option> 
                    </select>
               </div>
               <div><select name="toilets[]">
                    <option value="1">1T</option>
                    <option value="2">2T</option>
                    <option value="3">3T</option>
                    </select>
               </div> 
               </div>');
          });
  js('#addduplex').click(function(e){
   js('#cato_Duplex_House').append('<div class="form-group submenu">
              <div ><select name="rooms[]" >
                    <option value="1">1BHK</option>
                    <option value="2">2BHK</option>
                    <option value="3">3BHK</option> 
                    </select>
               </div>
               <div><select name="toilets[]">
                    <option value="1">1T</option>
                    <option value="2">2T</option>
                    <option value="3">3T</option>
                    </select>
               </div> 
               </div>');
       });
   js('#addpenthouse').click(function(e){
    js('#category_Pent_House').append('<div class="form-group submenu">
              <div ><select name="rooms[]" >
                    <option value="1">1BHK</option>
                    <option value="2">2BHK</option>
                    <option value="3">3BHK</option> 
                    </select>
               </div>
               <div><select name="toilets[]">
                    <option value="1">1T</option>
                    <option value="2">2T</option>
                    <option value="3">3T</option>
                    </select>
               </div> 
               </div>');
          });
     });
      js(document).ready(function(){    
        js('#category').change(function () {
           var selection = js(this).val();
           js('#category_'+selection).show('slow');
             });
         });
     </script>

这是我的代码。当我根据所选类别选择类别时，div cato_Independent_House cato_Duplex_House 和 category_Pent_House 会附加到它们各自的类别中。

考虑首先从下拉列表中选择independant house，以便在单击按钮时将其各自的cato_Independent_House 附加到ID为id="category_Independent_House"的div。之后，从下拉列表中选择其各自的'cato_Duplex_House ' 在单击按钮时使用 id="cato_Duplex_House" 附加到 div。

但是当我返回并选择独立屋时，在单击按钮之前，它不能显示先前选择的 div。但是这里已经显示了DIV，即使我回去时也没有单击该按钮。这样做？

【问题讨论】：

发布您当前的 javascript 代码。
为什么你的
我已经编辑并更正了代码

标签： javascript jquery

【解决方案1】：

js(document).ready(function(){ 
        js('#category').change(function () {
           var selection = js(this).val();
            js('.cato').each(function() {
                console.log(js('.cato'));
                if(js(this).attr('data-visible') != "true") {
                    js(this).hide();
                }
            });
           js('#category_'+selection).show('slow');
             });
         js('.addProperty').click(function(){
             js(this).parents('.cato').attr('data-visible','true');
         });
         });

html

<input type="button" id="addduplex" value="Add Property"  class="addProperty" />

将类 addProperty 添加到所有添加属性输入

工作 JsFiddle 链接。我想这就是你想要的

【讨论】：

【解决方案2】：

您应该使用 jquery hide 方法来隐藏其他 div，具体取决于您选择的那个：

js(document).ready(function(){ 
    js('#category').change(function () { 
      var selection = js(this).val(); 
      js('#category_'+selection).show('slow'); 
      if(selection=="Independent_House"){
          js('#cato_Duplex_House').hide();
          js('#cato_Pent_House').hide();
      }else if(...){
          {otherCases}
    });});

如果您还想清除每个 div 的输入选择，您可以执行以下操作：

js("#input_controller_id_to_clear")[0].selectedIndex = -1;

【讨论】：