Question

我对JQuery很感兴趣，这是一个简单的问题，但我们走了......

我有一个UL，每个LI都有一个图像

  <ul id="thumnail">
     <li id="tab 1">  <img class="tagline"> </li>
     <li id="tab 2">  <img class="tagline"> </li>
     <li id="tab 3">  <img class="tagline"> </li>
     <li id="tab 4">  <img class="tagline"> </li>
    </ul>

隐藏图像，当您点击每个图片时，我希望其中的图像显示。我所拥有的代码将在点击任何一个li时显示所有图像，但是我如何自己定位和显示每个图像。

这是我到目前为止的JQuery（显示所有图像）

   $('#tumbnail li').on('click', function () { 
                                         $('.tagline').css('display','block')

Answer 1

这应该这样做：

$('#thumbnail li').on('click', function () { 
            $(this).children(".tagline").show();

});

您在定位列表时也遇到了一些拼写错误，但没有帮助。你可以在这里看到它：

http://jsfiddle.net/d7WbW/

Answer 2

$('#tumbnail li').on('click', function (event) { 
    event.target.css('display','block')
});

Answer 3

试试这个：

$(document).ready(function () {
     $('#thumnail li').on('click', function () { 
       $(this).find("img").show();
       // you can use toggle() to show/hide image on every click
       //$(this).find("img").toggle();
     });
});

这是一个完整的播放代码：http://jsfiddle.net/maximua/7mK8c/

在UL中定位8个图像中的一个

3 个答案: