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

Question

有谁知道如何在jQuery中抓取许多具有相同类的对象，然后通过单击上一个按钮显示具有相同类的上一个对象，然后单击下一个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;
})

更新：

它有效，但让我再问一个问题：(并感谢您到目前为止的帮助！我决定稍微改进我的代码，使其更容易样式和更新，我决定每个食谱都是单独的 ul，以使其更易于阅读等

<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
}
})