Question

我创建了一个有点复杂的列表，我希望在单击具有“ .recipes”类的元素之后，将其显示在段落中，但是单击“ prev”或“ next”按钮后，我希望切换到具有相同类名的上一个或下一个元素。我已经知道如果彼此相邻，如何切换列表，但是将它们放在不同的父母中后，似乎更加复杂：

<div>
    <button class="prev">prev</button>
    <button class="next">next</button>
    <p class="showRecipies"></p>
    <ul class="listOfRecipies">
        <li>
            <ul class="particularRecipie">
                <li class="timeOfPreparation">3:20</li>
                <li class="recipies">Drinks</li>
            </ul>
        </li>
        <li>
            <ul class="particularRecipie">
                <li class="timeOfPreparation">3:20</li>
                <li class="recipies">Vegetables</li>
            </ul>
        </li>
        <li>
            <ul class="particularRecipie">
                <li class="timeOfPreparation">3:20</li>
                <li class="recipies">Meat</li>
            </ul>
        </li>
        <li>
            <ul class="particularRecipie">
                <li class="timeOfPreparation">3:20</li>
                <li class="recipies">Fruits</li>
            </ul>
        </li>
        <li>
            <ul class="particularRecipie">
                <li class="timeOfPreparation">3:20</li>
                <li class="recipies">Others</li>
            </ul>
        </li>
    </ul>
</div>

显示点击的元素：

 $(".recipies").on("click", function() {
        $(".recipies.active").add($(this)).toggleClass("active");
        var recipieValue = $(this).text();
        var showRecipies = document.querySelector(".showRecipies");

        showRecipies.innerHTML = recipieValue;
    });

并在此论坛上显示我从另一个人那里获得的“食谱”类的先前元素，但是由于现在这些类具有不同的父母，所以它不起作用，我认为我可以添加更多的parents（），并且找到上一个或下一个“ .recipes”，但没有成功：

$(".prev").click(function() {
    var isFirst = $(".recipies.active").is(":first-child");
    if(isFirst){
        $(this).parent().find(".recipies:last").trigger("click");
    } else {
        $(".recipies.active").prev().trigger("click");
    }
});

Answer 1

检查一下：

$(".recipies").on("click", function() {
  $(".recipies.active").add($(this)).toggleClass("active");
  var recipieValue = $(this).text();
  var showRecipies = document.querySelector(".showRecipies");

  showRecipies.innerHTML = recipieValue;
});

$(".prev").click(function() {
  var isFirst = $(".recipies.active").text() == $($(".recipies").get(0)).text();
  if (isFirst) {
    $(this).parent().find(".recipies:last").trigger("click");
  } else {
    $(".recipies.active").parent().parent().prev().find(".recipies").trigger("click");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <button class="prev">prev</button>
  <button class="next">next</button>
  <p class="showRecipies"></p>
  <ul class="listOfRecipies">
    <li>
      <ul class="particularRecipie">
        <li class="timeOfPreparation">3:20</li>
        <li class="recipies">Drinks</li>
      </ul>
    </li>
    <li>
      <ul class="particularRecipie">
        <li class="timeOfPreparation">3:20</li>
        <li class="recipies">Vegetables</li>
      </ul>
    </li>
    <li>
      <ul class="particularRecipie">
        <li class="timeOfPreparation">3:20</li>
        <li class="recipies">Meat</li>
      </ul>
    </li>
    <li>
      <ul class="particularRecipie">
        <li class="timeOfPreparation">3:20</li>
        <li class="recipies">Fruits</li>
      </ul>
    </li>
    <li>
      <ul class="particularRecipie">
        <li class="timeOfPreparation">3:20</li>
        <li class="recipies">Others</li>
      </ul>
    </li>
  </ul>
</div>

jQuery切换具有相同类的列表

1 个答案: