gpt4 book ai didi

JQuery.Next() 没有选择器无法按预期工作

转载 作者:行者123 更新时间:2023-12-03 22:26:41 24 4
gpt4 key购买 nike

我正在尝试设置一个旋转面板,但是我有三种状态:事件、非事件、禁用。

我只想在事件面板和非事件面板之间旋转并跳过禁用的面板。如果没有更多非事件面板,则旋转回第一个面板。

但是,使用下面的代码,您单击按钮,它将选择 panel1,然后是 panel 2,然后返回到 panel 1,而不是选择 panel5。如果我从下面的粗体部分中删除 not 选择器,它会按预期工作。我认为这是我对下一个运算符(operator)的理解(或缺乏)。有什么想法吗?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#rotate").click(function () {
var ActivePanel = $('.active'); //Get the current active panel
var NextPanel = $('.active').next('.inactive:not(.disabled)'); //Get the next panel to be active.
if (NextPanel.length == 0) NextPanel = $("#panel1"); //check for null next. if so, rotate back to the first panel

console.log("Active Panel: ", ActivePanel);
console.log("Next Panel: ", NextPanel);

$(ActivePanel).removeClass("active").addClass("inactive");
$(NextPanel).removeClass("inactive").addClass("active");
});
});
</script>
</head>
<body>
<button id="rotate">Rotate Active Panel</button>
<div id="panel1" class="active"><p>Some Content</p></div>
<div id="panel2" class="inactive"></div>
<div id="panel3" class="inactive disabled"></div>
<div id="panel4" class="inactive disabled"></div>
<div id="panel5" class="inactive"></div>
</body>
</html>

最佳答案

next 方法仅返回与选择器匹配的直接兄弟。使用the nextAll method.

尝试以下操作:

$("#rotate").click(function() {
var activePanel = $('.active'); //Get the current active panel
var nextPanel = activePanel.nextAll('.inactive').not('.disabled').first(); //Get the next panel to be active.
if (!nextPanel.length) {
nextPanel = $("#panel1"); //check for null next. if so, rotate back to the first panel
}

console.log("Active Panel: ", activePanel);
console.log("Next Panel: ", nextPanel);

$(activePanel).removeClass("active").addClass("inactive");
$(nextPanel).removeClass("inactive").addClass("active");
});

See here for jsFiddle.

关于JQuery.Next() 没有选择器无法按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8359746/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com