Question

我有一个制作经销商列表的循环。我试图将它们分成一个列表。但是，此功能仅显示列表中的第一个。怎么了？

理论上它应该让每个人都可见，而不仅仅是第一个。我认为问题在于第二个函数，.each(function)看起来不像它正在工作。输出或多或少是这一个：

$(document).ready(function() {
  $("select[name*='conti']").change(function() {
    select_changed();
  });
});
select_changed();

function select_changed() {
  $("div[id*='conti-']").each(function() {
    $(this).hide().removeClass('visibile');
  });
  $("select[name*='conti']").each(function() {
    var selected = $(this).val();
    $('#' + selected).show().addClass('visibile');
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="conti" id="conti" class="selettore">
  <option value="conti-Europe">Europe</option>
  <option value="conti-Asia">Asia</option>
  <option value="conti-NorthAmerica">North America</option>
  <option value="conti-SouthAmerica">South America</option>
</select>
<div>
  <div id="conti-Europe">
    box A
  </div>
  <div id="conti-Europe">
    box A
  </div>
  <div id="conti-Asia">
    box b
  </div>
  <div id="conti-Asia">
    box b
  </div>
</div>

Answer 1

问题是因为您有重复的id属性。这是无效的，因为必须是唯一的。改为使用类。

另请注意，通过提供对事件处理程序的函数引用，并删除不必要的第二个each()循环来隐藏元素，可以使逻辑更简洁。试试这个：

＆＃13;

$(document).ready(function() {
  $("select[name*='conti']").change(select_changed).trigger('change');
});

function select_changed() {
  $('.conti').hide().removeClass('visibile');
  
  $("select[name*='conti']").each(function() {
    var selected = $(this).val();
    $('.' + selected).show().addClass('visibile');
  });
}

＆＃13;

.visibile { color: #C00; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="conti" id="conti" class="selettore">
  <option value="conti-Europe">Europe</option>
  <option value="conti-Asia">Asia</option>
  <option value="conti-NorthAmerica">North America</option>
  <option value="conti-SouthAmerica">South America</option>
</select>

<div>
  <div class="conti conti-Europe">box A</div>
  <div class="conti conti-Europe">box A</div>
  <div class="conti conti-Asia">box b</div>
  <div class="conti conti-Asia">box b</div>
</div>

＆＃13;

从select的值中添加类不在每个（）循环中工作

1 个答案: