带有循环和var的多个元素的jQuery toggleClass

Question

我在 .list1 和 .list2 uls 上有多个元素，.list2 不可见，.list1 中的元素触发 .list2 中的元素。我不知道会有多少元素，所以我想对一些带有点击事件的 jQuery 代码使用循环。但是循环不起作用。我做错了什么？

JS Fiddile here

<ul class="list1">
<li class="opt1">option1</li>
<li class="opt2">option2</li>
<li class="opt3">option3</li>
<li class="opt4">option4</li>
<li class="opt5">option5</li>

<ul class="list2">
<li class="opt1">option1</li>
<li class="opt2">option2</li>
<li class="opt3">option3</li>
<li class="opt4">option4</li>
<li class="opt5">option5</li>

for (var x = 1; x <= 5; x++){
  $(".list1 li.opt" + x).click(function() {
      $(".list2 li").removeClass("selected");   
      $(".list2 li.opt" + x).addClass("selected");
  });
}

Answer 1

尝试为此编写single event，不要使用for 循环，并利用.index() 从list-2 中获取相关元素

$('.list1 li').click(function () {
    $('.list2 li').removeClass("selected").eq($(this).index()).addClass("selected");
});

DEMO