jquery如何通过onclick获取每一个li的值

Question

我有 3 张图像要显示，图像在 li 内，我在每个 li 上设置值，li 的值对应于窗口的宽度。例如，如果我得到 li 索引 0 的第一个值，第一张图像将显示..等等。这是我的代码

<div class="sliderContainer">
  <ul class="slides">
    <li class="slide" value="0">img</li>
    <li class="slide" value="1366">img</li>
    <li class="slide" value="2732">img</li>
  </ul>

  <a class="next"><img src="images/sliderArrowleft.png" /></a>
  <a class="prev"><img src="images/sliderArrowright.png" /></a>  
</div>

如果我单击 .next btn，它必须获得 li 值 1366 然后如果我再次单击 .next btn 它将获得 2732 并再次从 0、1366、2732 循环并再次循环......请帮帮我……

Answer 1

我想这就是您要找的:

$(document).ready(function() {
  var values = [],
    index = 0,
    items = $('.slide').length;

  $(".slide").each(function(index) {
    values.push($(this).val());
  });

  $('.prev').click(function() {
    var tmp = index--;
    if (tmp <= 0) index = items;
    console.log('Switch to slide n°' + index);
  });

  $('.next').click(function() {
    var tmp = index++;
    if (tmp >= items) index = 0;
    console.log('Switch to slide n°' + index);
  });

});

很棒的地方:无论您有多少张幻灯片，它都可以正常工作!

这是一个 fiddle :https://jsfiddle.net/o2gxgz9r/4405/

我的方法有点冗长，没有像 Mehul Mohan 那样使用 prev() 和 next()，但它很容易理解。