Javascript 第n个子项随单击而增加或减少

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

我尝试了下面的功能，但没有成功。有人能告诉我怎么做吗

$(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) );
    });
});

---

这种类型的功能是阵列的用途：

$(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并依赖与菜单元素顺序匹配的索引是很脆弱的。我建议将这些值更紧密地联系起来，可能是这样的：

<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>

---

您可以使用数组，然后使用单击的

li

elements索引从数组中获取目标源

$(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()])
    });
});

---

演示：

我重新编写了您的问题，以反映您实际想要做的事情。你最初的措辞似乎是在问一些完全不同的问题，真正的意图只有在小提琴上才清楚——请不要依赖外部链接（比如你的小提琴）来解释你的问题。（提供一把小提琴来说明问题肯定是有帮助的，但不要依赖它。）

$(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()])
    });
});