Question

我使用以下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，则会在"#3"中写入div。如果我点击li号码6，则会在同一"#6"中显示div。

这是我目前的剧本：

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

Answer 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

Answer 2

您可以执行以下操作：

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

Answer 3

试试这个JSfiddle

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

单击列表项时如何编写内容？

3 个答案: