javascript - 两个 UL 已链接，单击 LI 并在两个 UL 中将 active 添加到 LI

Question

我有 2 个 UL，其中一个是我的链接，另一个是图片。

我希望能够从一个列表中单击一个 LI，然后让它显示来自另一个 ul 的链接 li。我希望我已经解释得够清楚了。

我曾尝试为 uls 编制索引以提出解决方案，但到目前为止运气不佳。请参阅下面的尝试。非常感谢任何帮助。我是 jQuery 的新手。

JSFIDDLE

<ul class="options">
    <li class="active">Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
</ul>

<ul class="destination">
    <li class="active">Destination 1</li>
    <li>Destination 2</li>
    <li>Destination 3</li>
</ul>

    $(function(){

    $(".options li").each(function(index) {
        $(this).addClass('option' + index);
    });

    $(".destination li").each(function(index) {
        $(this).addClass('destination' + index);
    }); 

    $(".options li").click(function(e){
        $(".options li").removeClass('active');   
        $(this).addClass('active');    
    });

});

Answer 1

试试这个:

$(".options li").each(
    function(index) {
        $(this).click(function() {
            $(".active").removeClass('active');
            $(this).addClass('active');
            $(".destination li").eq(index).addClass('active');
        })   
    }
);

您可以使用 .each() 的 index 参数来确定索引并将其保存在匿名 .click 函数中。

JSFIDDLE