循环访问名称列表并在单击侦听器上添加 Jquery

Loop over list of names and add Jquery on click listener

本文关键字：侦听器 单击 添加 Jquery 访问 列表 循环      更新时间：2023-09-26

我正在尝试设置它，对于每个带有类country的复选框，检查都会找到每个带有属性名称和div this切换类的输入。它只对第一个输入起作用。

$(".country").each(function(){
  var country_name = $(this).attr('name');
 if(this.click) {
    $("."+country_name).each(function() {
                $( this ).toggleClass('hide');
            });
}
 });

<div id="country" class="form-group">
    <label>Country</label><br>
    <input class="country" id="Kenya" type="checkbox" value="Kenya" name="Kenya"> Kenya<br>
    <input class="country" id="Uganda" type="checkbox" value="xxx" name="Uganda"> Uganda<br>
    <input class="country" id="Tanzania" type="checkbox" value="xxx" name="Tanzania"> Tanzania<br>
  </div>
  <div id="destination" class="form-group">
    <label>Destination</label><br>
    <div class="Kenya"><input type="checkbox" value="xxx" name="des1"> Maasai Mara<br></div>
    <div class="Kenya"><input type="checkbox" value="xxx" name="des2"> Serengeti<br></div>
    <div class="Kenya"><input type="checkbox" value="xxx" name="des3"> KWS<br></div>
    <div class="Uganda"><input type="checkbox" value="xxx" name="des1"> Maasai Mara<br></div>
    <div class="Uganda"><input type="checkbox" value="xxx" name="des2"> Serengeti<br></div>
    <div class="Uganda"><input type="checkbox" value="xxx" name="des3"> KWS<br></div>
    <div class="Tanzania"><input type="checkbox" value="xxx" name="des1"> Maasai Mara<br></div>
    <div class="Tanzania"><input type="checkbox" value="xxx" name="des2"> Serengeti<br></div>
    <div class="Tanzania"><input type="checkbox" value="xxx" name="des3"> KWS<br></div>
  </div>

简单地做：

$('input[type="checkbox"].country').on('click', function (){
    var name = $.trim(this.name);
    $('#destination div.' + name).toggleClass('hide');
});

$('.country').click(function () {
  $('.' + $(this).attr('id')).toggleClass('hide');
  // or $('.' + this.name).toggleClass('hide');
});

http://jsbin.com/sisawe/3/

以下是您将如何做到这一点

$(document).ready(function() {
    $('.country').on('click', function() {
        $('.' + this.name).toggleClass( 'hide' );
    });
});


    $(document).ready(function() {
        $('.country').on('click', function() {
            $('.' + this.name).toggleClass( 'hide' );
        });
    });
.hide {
  display:none;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="country" class="form-group">
    <label>Country</label><br>
    <input class="country" id="Kenya" type="checkbox" value="Kenya" name="Kenya"> Kenya<br>
    <input class="country" id="Uganda" type="checkbox" value="xxx" name="Uganda"> Uganda<br>
    <input class="country" id="Tanzania" type="checkbox" value="xxx" name="Tanzania"> Tanzania<br>
  </div>
  <div id="destination" class="form-group">
    <label>Destination</label><br>
    <div class="Kenya"><input type="checkbox" value="xxx" name="des1"> Maasai Mara<br></div>
    <div class="Kenya"><input type="checkbox" value="xxx" name="des2"> Serengeti<br></div>
    <div class="Kenya"><input type="checkbox" value="xxx" name="des3"> KWS<br></div>
    <div class="Uganda"><input type="checkbox" value="xxx" name="des1"> Maasai Mara<br></div>
    <div class="Uganda"><input type="checkbox" value="xxx" name="des2"> Serengeti<br></div>
    <div class="Uganda"><input type="checkbox" value="xxx" name="des3"> KWS<br></div>
    <div class="Tanzania"><input type="checkbox" value="xxx" name="des1"> Maasai Mara<br></div>
    <div class="Tanzania"><input type="checkbox" value="xxx" name="des2"> Serengeti<br></div>
    <div class="Tanzania"><input type="checkbox" value="xxx" name="des3"> KWS<br></div>
  </div>

但我认为这就是您的意图：

$(document).ready(function() {
    $('.country').on('change', function() {
        $('.' + this.name).toggleClass( 'hide', !this.checked );
    })
    .change();
});


    $(document).ready(function() {
        $('.country').on('change', function() {
            $('.' + this.name).toggleClass( 'hide', !this.checked );
        })
        .change();
    });
.hide {
  display:none;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="country" class="form-group">
    <label>Country</label><br>
    <input class="country" id="Kenya" type="checkbox" value="Kenya" name="Kenya"> Kenya<br>
    <input class="country" id="Uganda" type="checkbox" value="xxx" name="Uganda"> Uganda<br>
    <input class="country" id="Tanzania" type="checkbox" value="xxx" name="Tanzania"> Tanzania<br>
  </div>
  <div id="destination" class="form-group">
    <label>Destination</label><br>
    <div class="Kenya"><input type="checkbox" value="xxx" name="des1"> Maasai Mara<br></div>
    <div class="Kenya"><input type="checkbox" value="xxx" name="des2"> Serengeti<br></div>
    <div class="Kenya"><input type="checkbox" value="xxx" name="des3"> KWS<br></div>
    <div class="Uganda"><input type="checkbox" value="xxx" name="des1"> Maasai Mara<br></div>
    <div class="Uganda"><input type="checkbox" value="xxx" name="des2"> Serengeti<br></div>
    <div class="Uganda"><input type="checkbox" value="xxx" name="des3"> KWS<br></div>
    <div class="Tanzania"><input type="checkbox" value="xxx" name="des1"> Maasai Mara<br></div>
    <div class="Tanzania"><input type="checkbox" value="xxx" name="des2"> Serengeti<br></div>
    <div class="Tanzania"><input type="checkbox" value="xxx" name="des3"> KWS<br></div>
  </div>

可以将事件处理程序委托给包含div 的复选框，从而将处理程序附加到一个元素而不是多个元素。

也不需要"隐藏"类（除非它执行隐藏以外的其他操作）。请改用.hide()和.show()。

详细地说： 

$("#country").on('change', 'input', function() {
    var country = $(this).attr('name');
    if(this.checked) {
        $("#destination div." + country).show();
    } else {
        $("#destination div." + country).hide();
    }
}).find('input').trigger('change');

演示

或简明扼要：

$("#country").on('change', 'input', function () {
    $("#destination div." + $(this).attr('name'))[['hide', 'show'][+this.checked]]();
}).find('input').trigger('change');

演示

相关文章：