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 個あります」

1 つの「.quickview-btn」div をクリックすると、前後の (存在する場合) 「.quickview-btn」div の「data-pid」値を取得する必要があります。 .

注：この構造を念頭に置いて他の多くの操作を行うため、html構造を変更することはできません。したがって、すべての li を 1 つの ul に入れることはできません。

私はjQueryが初めてなので無知です。誰でもこれについて私を助けてもらえますか?

4

2 に答える 2

6

次のよう.quickview-btn divに、内部にあるすべての を見つけることができます。.products-grid divs

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

次に、クリックされたもののインデックスを見つけます。

var index = btns.index(this);

次に-1、 andを使用して、その内容に関係なく+1、前と次を取得できます。ul

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

prevundefined最初のボタンになります。最後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 に答える