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

Question

我在显示我点击的图片后出现的图片名称时遇到问题。我尝试了多种方法来实现这一点，包括 $(this).parent().next() 和 $(event.target).next().完成这件事似乎很简单，但结果总是 return 未定义。

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

你应该得到你点击的元素的索引，然后得到索引+1的元素。未经测试的代码：

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

Answer 2

$('.pic') select 所有 a 标签，所以在点击处理程序中，this 指的是 a 如果你想得到 li简单 $(this).parent() 就足够了。另外，为了获取当前图像，您不需要获取 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>

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

Cannot figure out how to find the list item after the one that I click

jquery

list

listitem