javascript - nth-child 随着点击的增加而减少

Question

我有一组构成菜单的 li 元素。当用户单击特定的 li 元素时，我想将 iframe 元素的源更改为与单击的项目对应的 URL。

我已经尝试了下面的功能，但它没有工作。有人可以建议如何做到这一点吗？

http://jsfiddle.net/ZnMTK/8/

$(document).ready(function(){
    var source1="http://www.hurriyet.com.tr";
    var source2="http://www.milliyet.com.tr";
    var source3="http://www.vatan.com.tr";
    var source4="http://www.ensonhaber.com";
    $("#menubar ul li:nth-child(i)").click(function(){
        $(this).attr('src', source(i) );
    });
});

Answer 1

您可以使用数组，然后使用单击的li元素索引从数组中获取目标源。

$(document).ready(function(){
    var sources =["http://www.hurriyet.com.tr","http://www.milliyet.com.tr","http://www.vatan.com.tr","http://www.ensonhaber.com"],
    $("#menubar li").click(function(){
       $('#iframe1').attr('src', sources[$(this).index()])
    });
});

演示：小提琴

Answer 2

这种类型的功能就是数组的用途：

$(document).ready(function(){
    var sources =["http://www.hurriyet.com.tr","http://www.milliyet.com.tr","http://www.vatan.com.tr","http://www.ensonhaber.com"],
    i = 0;
    $("#menubar li").click(function(){
        $("#iframe1").attr('src', sources[$(this).index()] );
    });
});

但是，在 JavaScript 中指定所有 URL 并依赖与菜单 li 元素的顺序匹配的索引有点脆弱。我建议将值更紧密地联系起来，也许是这样的：

<ul id="menubar">
    <li data-src="http://www.hurriyet.com.tr">Hurriyet</li>
    <li data-src="http://www.milliyet.com.tr">Milliyet</li>
    <li data-src="http://www.vatan.com.tr">Vatan</li>
    <li data-src="http://www.ensonhaber.com">Ensonhaber</li>
</ul>

然后用JS：

$(document).ready(function () {
    $("#menubar li").click(function () {
        $("#iframe1").attr('src', $(this).attr("data-src"));
    });
});