Jquery语法问题
Jquery语法问题
提问于 2011-11-25 23:58:20
我想做的是：
#p12-1应该淡入淡出(这是一个点击这里的按钮)。
单击时，它应该查看变量$section的值，然后选择要运行的部分。在运行该部分时，它还应该递增变量$section。这意味着每次单击#p12-1时，每个部分都会显示下一个div，并隐藏一些/所有旧的div。
if (index == 11) {
$section == (parseInt(1));
$("#prev").show();
$("#next").show();
$("#p12-1").delay(1000).fadeIn("slow", function() {
(function loop() {
$("#p12-1").delay(200).fadeTo("slow", 0.5, function () {
$("#p12-1").delay(200).fadeTo("slow", 1, loop);
});
}());
});
$("p12-1").click(function () {
if ($section == 1) {
var $section = (parseInt(currentValue) + 1);
$("#p12-2").fadeOut(1000);
$("#p12-3").fadeOut(1000);
$("#p12-4").fadeIn(1000);
$("#p12-5").fadeIn(1000);
};
if ($section == 2) {
var $section = (parseInt(currentValue) + 1);
$("#p12-4").fadeOut(1000);
$("#p12-5").fadeOut(1000);
$("#p12-6").fadeIn(1000);
$("#p12-7").fadeIn(1000);
$("#p12-8").fadeIn(1000);
};
if ($section == 3) {
var $section = (parseInt(currentValue) + 1);
$("#p12-6").fadeOut(1000);
$("#p12-9").fadeIn(1000);
$("#p12-10").fadeIn(1000);
};
if ($section == 4) {
var $section = (parseInt(currentValue) + 1);
$("#p12-6").fadeOut(1000);
$("#p12-9").fadeOut(1000);
$("#p12-10").fadeOut(1000);
$("#p12-11").fadeIn(1000);
$("#p12-12").fadeIn(1000);
};
});
}HTML：
<div class="main-slide main-slide-12" style="display:none;">
<div id="p12-1" style="display:none;"><img src="images/p12-1.png" /></div>
<div style="display:block;" id="p12-2"><img src="images/p12-2.png" /></div>
<div style="display:block;" id="p12-3"><img src="images/p12-3.png" /></div>
<div style="display:none;" id="p12-4"><img src="images/p12-4.png" /></div>
<div style="display:none;" id="p12-5"><img src="images/p12-5.png" /></div>
<div style="display:none;" id="p12-6"><img src="images/p12-6.png" /></div>
<div style="display:none;" id="p12-7"><img src="images/p12-7.png" /></div>
<div style="display:none;" id="p12-8"><img src="images/p12-8.png" /></div>
<div style="display:none;" id="p12-9"><img src="images/p12-9.png" /></div>
<div style="display:none;" id="p12-10"><img src="images/p12-10.png" /></div>
<div style="display:none;" id="p12-11"><img src="images/p12-11.png" /></div>
<div style="display:none;" id="p12-12"><img src="images/p12-12.png" /></div>
</div> 不幸的是，所有这些项目都是需要的，其中一些需要在不同的时间显示和隐藏。我认为问题出在语法上，因为我将能够编辑每个if ($section == X)块中的选项。
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-11-26 01:23:47
我不理解你的一些代码，但这里有一个你可能会喜欢的想法。您可以使用简单的反转控制，而不是控制元素在代码中做什么--因为元素可以有多个类，所以当元素显示和隐藏时，您可以拥有元素状态。这使得代码更简单(我相信也更清晰)。
因此，HTML可能如下所示：
<div class="main-slide main-slide-12" style="display:none;">
<div id="p12-1" style="display:none;"><img src="images/p12-1.png" /></div>
<div class="hide-1" ><img src="images/p12-2.png" /></div>
<div class="hide-1" ><img src="images/p12-3.png" /></div>
<div class="show-1 hide-2" ><img src="images/p12-4.png" /></div>
<div class="show-1 hide-2" ><img src="images/p12-5.png" /></div>
<div class=" show-2 hide-3 hide-4" ><img src="images/p12-6.png" /></div>
<div class=" show-2" ><img src="images/p12-7.png" /></div>
<div class=" show-2" ><img src="images/p12-8.png" /></div>
<div class=" show-3 hide-4" ><img src="images/p12-9.png" /></div>
<div class=" show-3 hide-4" ><img src="images/p12-10.png" /></div>
<div class=" show-4" ><img src="images/p12-11.png" /></div>
<div class=" show-4" ><img src="images/p12-12.png" /></div>
</div> 然后你的javascript将看起来像这样：
$("#p12-1").click(function () {
$(".hide-"+$section).fadeOut(1000);
$(".show-"+$section).fadeIn(1000);
});在我看来，当查看html时，这似乎揭示了潜在的bug(例如p12-11从不隐藏)。
Stack Overflow用户
发布于 2011-11-26 01:11:12
if (index == 11) {
$section == (parseInt(1));
$("#prev").show();
$("#next").show();
$("#p12-1").delay(1000).fadeIn("slow", function() {
(function loop() {
$("#p12-1").delay(200).fadeTo("slow", 0.5, function () {
$("#p12-1").delay(200).fadeTo("slow", 1, loop);
});
}());
});
$("######p12-1").click(function () {尝试添加“#”字符...jquery找不到元素p12-1，因为它不存在，不会触发单击事件
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8271525
复制相关文章
相似问题
腾讯云开发者
