我单击后无法弄清楚如何找到列表项

Question

I am having trouble displaying the name of the image that comes after the one I click. 我无法显示单击后的图像的名称。 I've tried various ways to accomplish this, including $(this).parent().next() and $(event.target).next(). 我尝试了多种方法来完成此操作，包括$（this..parent（）。next（）和$（event.target）.next（）。 It seems like a simple enough thing to accomplish, but the results always return undefined. 这看起来很简单，但是结果总是返回未定义的结果。

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "utf-8" />
        <title>Example</title>
        <script type = "text/javascript" src = "jquery.js"></script>

        <script type = "text/javascript">
            $(document).ready(function() 
            {   
                /* Output the filename of the clicked picture */
                $('.pic').click(function(e) 
                {
                    var currentImage = $(this).closest('li').find('img').attr('src');
                    $('#showCurrentPicName').html('<h1>You clicked ' + currentImage + '</h1>');
                });

                /*Output the filename of the picture after the one that is clicked. */
                $('.pic').click(function(e)
                {
                    var nextImage = $(this).next('li').find('img').attr('src');
                    $('#showNextPicName').html('<h1>The next image is ' + nextImage + '</h1>');
                });
            });
        </script>
    </head>


    <body>
        <div>
            <h1>Pictures</h1>
            <ul>
                <li><a class = "pic" href = "#"><img src = "brass.jpg"</a></li>
                <li><a class = "pic" href = "#"><img src = "sunburst.jpg"</a></li>
                <li><a class = "pic" href = "#"><img src = "ice.jpg"</a></li>
                <li><a class = "pic" href = "#"><img src = "horizon.jpg"</a></li>
            </ul>

            <div id = "showCurrentPicName"></div>

            <div id = "showNextPicName"></div>
        </div>
    </body>
</html>

Answer 1

You should get the index of the element you click and then get the element with index + 1. untested code: 您应该获取单击元素的索引，然后获取索引为1的元素。未经测试的代码：

var index = $(this).parent(0).index();
var next = $(this).parents('ul:first').find('li:nth-child('+(index+1)+')');

Answer 2

$('.pic') select all a tag, so inside click handler, this refers to a and if you want get li simple $(this).parent() will be enough. $('.pic')选择所有a标签，所以点击处理程序中， this指的是a ，如果你想获得li简单$(this).parent()就足够了。 Also for get current image you not need get li because image inside a 也让当前的图像，你并不需要GET li ，因为里面像a

 $(document).ready(function() { /* Output the filename of the clicked picture */ $('.pic').click(function(e) { var currentImage = $(this).find('img').attr('src'); $('#showCurrentPicName').html('<h1>You clicked ' + currentImage + '</h1>'); }); /*Output the filename of the picture after the one that is clicked. */ $('.pic').click(function(e) { var nextImage = $(this).parent().next().find('img').attr('src'); if(nextImage) $('#showNextPicName').html('<h1>The next image is ' + nextImage + '</h1>'); else $('#showNextPicName').html(''); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <h1>Pictures</h1> <ul> <li> <a class="pic" href="#"> <img src="brass.jpg"/> </a> </li> <li> <a class="pic" href="#"> <img src="sunburst.jpg"/> </a> </li> <li> <a class="pic" href="#"> <img src="ice.jpg"/> </a> </li> <li> <a class="pic" href="#"> <img src="horizon.jpg"/> </a> </li> </ul> <div id="showCurrentPicName"></div> <div id="showNextPicName"></div> </div>

我单击后无法弄清楚如何找到列表项

问题描述

2 个解决方案

解决方案1
0 2015-08-14 18:00:26

解决方案2
0 已采纳 2015-08-14 18:17:58

我单击后无法弄清楚如何找到列表项

问题描述

2 个解决方案

解决方案1 0 2015-08-14 18:00:26

解决方案2 0 已采纳 2015-08-14 18:17:58

解决方案1
0 2015-08-14 18:00:26

解决方案2
0 已采纳 2015-08-14 18:17:58