单击列表项时如何编写内容？ [复制]答案

【问题标题】：How can I write content when a list item is clicked? [duplicate]单击列表项时如何编写内容？ [复制]
【发布时间】：2014-05-22 15:02:26
【问题描述】：

我正在使用以下 HTML 实现图像列表：

<ul id="gallery">
    <li>t</li>
    <li>t</li>
    <li>t</li>
    <li>t</li>
    <li>t</li>
    <li>t</li>
    <li>t</li>
    <li>t</li>
    <li>t</li>
</ul>
<span id="gallery-prev">Previous</span>

<span id="gallery-next">Next</span>

此外，我希望当我点击li 时，它会显示div 中的特定内容。

例如，如果我点击 li 数字 3，它会在 div 中写入 "#3"。
如果我点击 li 数字 6，它会在同一 div 中显示 "#6"。

这是我当前的脚本：

var galleryImages = new Array(
    'images/tb_01.jpg',
    'images/tb_02.jpg',
    'images/tb_03.jpg',
    'images/tb_04.jpg',
    'images/tb_05.jpg',
    'images/tb_06.jpg',
    'images/tb_07.jpg',
    'images/tb_08.jpg',
    'images/tb_09.jpg',
    'images/tb_10.jpg',
    'images/tb_11.jpg',
    'images/tb_12.jpg',
    'images/tb_13.jpg');

$('#gallery-next').click(function () {
    if ($('ul#gallery li:last img').length == 0) var curIndex = 0;
    else var curIndex = galleryImages.indexOf(
    $('ul#gallery li:last img').attr('src'));
    $('ul#gallery li').children().remove();
    $('ul#gallery li').each(function (index, el) {
        var img = new Image();
        $(img).load(function () {
            $(this).css('display', 'none');
            //$(el).append(this); -- doesn't work
            console.log('appended');
            $(this).fadeIn();
        }).attr('src',
        galleryImages[(curIndex + index) % galleryImages.length]);
        //found indexes, will now loop!
        $(el).html(((curIndex + index) % galleryImages.length));
        $(el).append(img); //does work
    });
});

这里是this fiddle

【问题讨论】：

附带说明：在 if-else 语句中包含多个 var curIndex 是没有意义的，并且可能导致令人困惑的逻辑错误。 JavaScript 具有函数作用域，当使用 var 时，声明被提升到其函数作用域的顶部，而赋值则保持在原来的位置。块作用域还没有被广泛使用（嗯，有办法），但将通过使用let 而不是var 在下一版本的ECMAScript 中。通常只假设函数范围。如果您不熟悉没有块范围的语言，则在函数顶部声明变量会有所帮助。

标签： javascript jquery html

【解决方案1】：

强制香草答案（仅限 IE9+）：

var elements = document.querySelectorAll("#gallery li");
for (var i=0; i<elements.length; i++) {
    (function(index) {
        elements[index].addEventListener("click",function() {
            console.log("You have clicked index: "+index);
        }, false);
    })(i);
}

将元素放入 NodeList，使用 for 循环进行迭代，并使用 closure 跟踪循环的索引，以便事件侦听器响应单击，并记录您单击的索引。

这是一个有效的fiddle

【讨论】：

你的代码不能工作..你也不需要关闭..更多你需要使用document.querySelectorAll("#gallery li");来获取所有li
@Florian 你救了他
糟糕，忘记了All。谢谢弗洛里安，很好的保存
@Pilot 是的，我喜欢答案的方式，所以刚刚编辑。
@FlorianMargaine 非常感谢..

【解决方案2】：

你可以这样做：

$("#gallery li").click(function() {
    var number = $(this).index() + 1;
    console.log("You clicked " + number);
});

【讨论】：

哈哈在同一时间给出相同的答案...我可以删除我的

【解决方案3】：

试试这个JSfiddle

$('#gallery').on('click', 'li', function(){ 
  var index = $(this).index()+1; 
  $(this).text('#'+index);
});

【讨论】：