我是jQuery的新手。这次,我尝试使用jQuery产生双重效果。
例如,当您单击单词时,其颜色首先变为红色。当您再次单击它时,其颜色变为蓝色。
所以我用下面的代码,但是效果不佳。
$(document).ready(function () {
$("p#origin").click(function () {
$(this).css("color", "red");
$(this).addClass("clicked");
});
$("p.clicked").click(function () {
$(this).css("color", "blue");
});
});
您可以在here上查看结果
我也试过了。
var toggle = 0;
console.log("toggle", toggle);
$(document).ready(function () {
if (toggle == 0) {
$("p#origin").click(function () {
$(this).css("color", "red");
toggle = 1;
console.log("toggle:", toggle);
});
} else {
$("p#origin").click(function () {
$(this).css("color", "blue");
toggle = 0;
console.log("toggle", toggle);
});
}
});
上面的代码结果可见here。变量
toggle
设置为1,但是不起作用。我的问题很好吗?我是新来的,所以我不知道JavaScript代码是如何加载的。 (我还需要帮助来研究此事...)
我希望任何解决方案都能起到双重作用。 (任何人都可以修复我的上述2个代码以使其正常工作吗?)
最佳答案
问题在于您正在处理动态选择器,即您希望根据选择器的动态评估来更改事件,在这种情况下,您需要使用event delegation。
但是在这种情况下,您不需要这样做,假设起初p#origin
没有蓝色,您可以执行以下操作
$(document).ready(function() {
$("p#origin").click(function() {
$(this).toggleClass("clicked").toggleClass('unclicked', !$(this).hasClass('clicked'));
});
});
#origin.unclicked {
color: blue;
}
#origin.clicked {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="origin">origin</p>
但是,如果
p#origin
在第一次单击之前具有蓝色,则可以将其简化为$(document).ready(function() {
$("p#origin").click(function() {
$(this).toggleClass("clicked");
});
});
#origin {
color: blue;
}
#origin.clicked {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="origin">origin</p>