2

这与我的上一个问题相似。抱歉，我不知道我是否可以编辑相同的问题。

所以这是我的要求。我的 HTML 有以下部分

<ul class="products-grid">
<li class="item">
    <div class="quickview-btn" data-pid="101" style="opacity: 0;">Quick View</div>
    <!-- some other elements -->
</li>
<li class="item">
    <div class="quickview-btn" data-pid="107" style="opacity: 0;">Quick View</div>
    <!-- some other elements -->
</li>
<li class="item">
    <div class="quickview-btn" data-pid="123" style="opacity: 0;">Quick View</div>
    <!-- some other elements -->
</li>
<li class="item">
    <div class="quickview-btn" data-pid="145" style="opacity: 0;">Quick View</div>
    <!-- some other elements -->
</li>

“我有 n 个这样的未排序列表”

当我单击一个“.quickview-btn” div 时，我应该获得下一个和上一个（如果存在）“.quickview-btn” div 的“data-pid”值，无论它们是在下一个 ul 还是上一个 ul .

注意：我不能修改 html 结构，因为我在做许多其他操作时都要牢记这个结构。所以我不能把所有的 li 放在一个 ul 中。

我一无所知，因为我是 jQuery 的新手。有人可以帮我吗？

4

2 回答 2

6

您可以像这样找到.quickview-btn div里面的所有 s .products-grid divs：

var btns = $(".products-grid .quickview-btn");

然后找到被点击的那个索引：

var index = btns.index(this);

然后，您可以使用-1and+1获取上一个和下一个，无论ul它们在什么位置：

var prev = btns.eq(index - 1).attr('data-pid');
var next = btns.eq(index + 1).attr('data-pid');

prev将是undefined第一个按钮。next将是undefined最后一次。

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<title>Grid Clicks</title>
<style>
.quickview-btn {
  display: inline-block;
  text-decoration: underline;
  color: blue;
}
</style>
</head>
<body>
  <ul class="products-grid">
    <li class="item">
        <div class="quickview-btn" data-pid="101">Quick View</div>
        101
    </li>
    <li class="item">
        <div class="quickview-btn" data-pid="107">Quick View</div>
        107
    </li>
    <li class="item">
        <div class="quickview-btn" data-pid="123">Quick View</div>
        123
    </li>
    <li class="item">
        <div class="quickview-btn" data-pid="145">Quick View</div>
        145
    </li>
  </ul>
  <ul class="products-grid">
    <li class="item">
        <div class="quickview-btn" data-pid="201">Quick View</div>
        201
    </li>
    <li class="item">
        <div class="quickview-btn" data-pid="207">Quick View</div>
        207
    </li>
    <li class="item">
        <div class="quickview-btn" data-pid="223">Quick View</div>
        223
    </li>
    <li class="item">
        <div class="quickview-btn" data-pid="245">Quick View</div>
        245
    </li>
  </ul>
  <script>
    (function($) {
      $(".products-grid .quickview-btn").click(function() {
        var btns = $(".products-grid .quickview-btn");
        var index = btns.index(this);
        var prev = btns.eq(index - 1).attr('data-pid');
        var next = btns.eq(index + 1).attr('data-pid');
        alert(
          "You clicked: " + $(this).attr('data-pid') +
          "\nPrev: " + prev +
          "\nNext: " + next
          );
      });
    })(jQuery);
  </script>
</body>
</html>

实例| 直播源

在下面的评论中你说过：

...但是单击最后一个“quickview-btn”的下一步不会获得第一个“quickview-btn”数据pid。我可以知道这是为什么吗？

因为上面没有任何内容可以实现该包装。它不会神奇地发生。

如果你想换行：Live Example | 直播源

var btns = $(".products-grid .quickview-btn");
var index = btns.index(this);
var count = btns.length;
var prev = btns.eq((index + (count - 1)) % count).attr('data-pid');
var next = btns.eq((index + 1) % count).attr('data-pid');
于 2013-06-08T09:27:23.447 回答
0

在这里我尝试了这个，它对我有用。如果有完美的方法请告诉我。

$('.quickview-btn').on('click', function () {
var nextId = $(this).closest('.item').next('.item').find('.quickview-btn').data('pid');
var prevId = $(this).closest('.item').prev('.item').find('.quickview-btn').data('pid');

if(!nextId){
   nextId = $(this).closest('.products-grid').next('.products-grid').find('.quickview-btn').data('pid');
}
if(!prevId){
    $(this).closest('.products-grid').prev('.products-grid').find('.quickview-btn').each(function(){
        prevId = $(this).data('pid');
    });
}

console.log(prevId, nextId); });

于 2013-06-08T09:36:03.457 回答