jQuery切换具有相同类的列表

时间:2018-08-13 14:13:51

标签: javascript jquery

我创建了一个有点复杂的列表,我希望在单击具有“ .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");
    }
});

1 个答案:

答案 0 :(得分:0)

检查一下:

$(".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>