Question

有人知道如何在jQuery中捕获许多具有相同类的对象，然后通过单击prev按钮并通过下一个btn显示下一个对象来显示具有相同类的先前对象吗？我只是从编程开始，然后尝试编写食谱存储，因此我坚持了下来，我可以获取单击的元素的值，但不知道如何使用按钮在它们之间进行切换

<div>
    <button class="prev"></button>
    <button class="next"></button>
    <p class="showRecipies"></p>
    <ul>
        <li class="recipies">Drinks</li>
        <li class="recipies">Vegetables</li>
        <li class="recipies">Meet</li>
        <li class="recipies">Fruits</li>
        <li class="recipies">Others</li>
    </ul>
</div>

jQuery来获取我点击的食谱的价值

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

        showRecipies.innerHTML = recipieValue;
    })

已更新：

它有效，但是让我再问一个问题：）感谢您到目前为止的帮助！我决定对代码进行一些改进，以使样式和更新变得更容易，并且我决定将每个食谱分开，以便于阅读等

<div>
    <button class="prev"></button>
    <button class="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 class "timeOfPreparation>3:20</li>
         <li class="recipies">Vegetables</li>
      <li>
        <ul class="particularRecipie">
         <li class "timeOfPreparation>3:20</li>
         <li class="recipies">Meet</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>
</div>

在这种情况下，我应该通过parent（）属性走得更高，对吗？喜欢：

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

  showRecipies.innerHTML = recipieValue;
});

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

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

Answer 1

您可以使用以下代码：

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

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

我已将$(".recipies.active").add($(this)).toggleClass("active");添加到您的.recipies点击功能中，因此我们知道li是有效的/已经被点击了

演示

$(".recipies").on("click", function() {
  $(".recipies.active").add($(this)).toggleClass("active");
  var recipieValue = $(this).text();
  var showRecipies = document.querySelector(".showRecipies");

  showRecipies.innerHTML = recipieValue;
});

$(".next").click(function() {
  var isLast = $(".recipies.active").is(":last-child");
  var $this = $(".recipies.active") || $(".recipies:first");
  if(isLast){
    $this.parent().find(".recipies:first").trigger("click");
  } else {
    $this.next().trigger("click");
  }
});

$(".prev").click(function() {
  var isFirst = $(".recipies.active").is(":first-child");
  var $this = $(".recipies.active") || $(".recipies:first");
  if(isFirst){
    $this.parent().find(".recipies:last").trigger("click");
  } else {
    $this.prev().trigger("click");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button class="prev">prev</button>
  <button class="next">next</button>
  <p class="showRecipies"></p>
  <ul>
    <li class="recipies">Drinks</li>
    <li class="recipies">Vegetables</li>
    <li class="recipies">Meet</li>
    <li class="recipies">Fruits</li>
    <li class="recipies">Others</li>
  </ul>
</div>

Answer 2

您可以使用prev()和next()来遍历可用的收件人：

var rec = $('.recipies:first');
$('.showRecipies').html(rec.html());

$('.prev').click(function() {
  rec = rec.prev('.recipies');
  
  if (!rec.length) {
    rec = $('.recipies:last');
  }
  
  $('.showRecipies').html(rec.html());
});

$('.next').click(function() {
  rec = rec.next('.recipies');
  
  if (!rec.length) {
    rec = $('.recipies:first');
  }
  
  $('.showRecipies').html(rec.html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button class="prev">prev</button>
  <button class="next">next</button>
  <p class="showRecipies"></p>

  <ul>
    <li class="recipies">Drinks</li>
    <li class="recipies">Vegetables</li>
    <li class="recipies">Meet</li>
    <li class="recipies">Fruits</li>
    <li class="recipies">Others</li>
  </ul>
</div>

Answer 3

下一步按钮：

$(".next").click(function () {
    let currentRecipies = $('.recipies.current');
  let currentRecipiesValue = $('.recipies.current').text();
  let currentRecipiesIndex = $('.recipies.current').index();
  let nextRecipiesIndex = currentRecipiesIndex + 1;
  let nextRecipies = $('.recipies').eq(nextRecipiesIndex);
  currentRecipies.removeClass('current');
  let showRecipies = document.querySelector(".showRecipies");

  if (nextRecipiesIndex == ($('.recipies:last').index()+1)) {
    $('.recipies').eq(0).addClass('current');
    showRecipies.innerHTML = currentRecipiesValue

  } else {
    nextRecipies.addClass('current');
    showRecipies.innerHTML = currentRecipiesValue
  }
})

上一页：

$(".prev").click(function () {
    let currentRecipies = $('.recipies.current');
  let currentRecipiesValue = $('.recipies.current').text();
  let currentRecipiesIndex = $('.recipies.current').index();
  let nextRecipiesIndex = currentRecipiesIndex - 1;
  let nextRecipies = $('.recipies').eq(nextRecipiesIndex);
  currentRecipies.removeClass('current');
  let showRecipies = document.querySelector(".showRecipies");

  if (nextRecipiesIndex == ($('.recipies:first').index() - 1)) {
    $('.recipies').eq(4).addClass('current');
    showRecipies.innerHTML = currentRecipiesValue

  } else {
    nextRecipies.addClass('current');
    showRecipies.innerHTML = currentRecipiesValue
  }
})

jQuery获得许多具有相同类的对象并在它们之间切换

3 个答案: