在jQuery中,是否建议在添加该类之前检查是否已将类分配给元素？它甚至会产生任何影响吗？
例如:
<label class='foo'>bar</label>
如果对类baz已经被分配有疑问label,这将是最好的方法:
var class = 'baz';
if (!$('label').hasClass(class)) {
$('label').addClass(class);
}
或者这就足够了:
$('label').addClass('baz');
我遇到过以下脚本,它检查一个元素是否有类a,如果没有,则添加它:
if (!$("div").hasClass("a")){
$("div").addClass("a");
}
由于jQuery不会添加该类(如果它已经存在),因此可以将其更改为:
$("div").addClass("a");
但是,通过使用hasClassfirst 是否有任何性能改进,或者这是否使用相同的方法addClass,因此重复逻辑？
好吧,我知道通过一些jQuery动作,我们可以为特定的div添加很多类:
<div class="cleanstate"></div>
让我们说,通过点击和其他一些事情,div可以获得很多课程
<div class="cleanstate bgred paddingleft allcaptions ..."></div>
那么,我如何删除除一个类之外的所有类？我提出的唯一想法就是:
$('#container div.cleanstate').removeClass().addClass('cleanstate');
在removeClass()杀死所有类的同时,div被搞砸了,但在之后添加addClass('cleanstate')它会恢复正常.另一个解决方案是使用基本CSS属性放置一个ID属性,这样它们就不会被删除,这也会提高性能,但我只是想知道另一个解决方案除去".cleanstate"之外的所有解决方案.
我问这个是因为,在真实的脚本中,div会遭受各种类的更改.
我正在尝试做一些非常简单的事情.基本上我有一个可点击的div'热点',当你点击它填满屏幕并显示一些内容.我通过简单地改变div的类,删除'spot'并添加'grow'来实现这一点,并且有一些CSS动画来使它成长.这很好用.
问题是,在这个div中有一个close_button,目前只是文本.我希望这可以将类切换回来 - 即删除成长和读取的点.单击时不会执行此操作.我相信这是在DOM加载时没有这些类的元素,但我是jQuery的新手,不知道如何解决这个问题.
我认为这可能是一种更明智的做法,有人能指出我正确的方向吗？我会非常感激的.我尝试使用toggleClass而无济于事.
$( document ).ready(function() {
$(".clickable").click(function() {
$(this).addClass("grown");
$(this).removeClass("spot");
});
$(".close_button").click(function() {
alert (this);
$("#spot1").removeClass("grown");
$("#spot1").addClass("spot");
});
});
更新:
我现在正在使用此代码,
$( document ).ready(function() {
$(document).on("click", ".close_button", function () {
alert ("oi");
$("#spot1").addClass("spot");
$("#spot1").removeClass("grown");
});
$(document).on("click", ".clickable", function () {
if ($(this).hasClass("spot")){
$(this).addClass("grown");
$(this).removeClass("spot");
}
});
});
奇怪的是,close_button函数仍然不会添加'spot'或删除'grow'虽然它会添加任何其他类,它会删除其他类...我添加了if子句,因为我认为这两个函数都可能被触发时间,互相取消,但似乎没有任何区别
我正在做一个formbuilder,我想改变例如标题div的外观.单击时,它应该得到一个边框但是当单击另一个动态生成的div时,应该删除该类,并且第二个单击的div必须获取.active类.
如何使用生成的div进行此操作？
无论如何我找到了一些有效的东西,但我仍然需要如果选择了另一个div,之前的div.removeclass和选中的div.addclass
这有效:
/* Add Class */
$(document).ready(function() {
$( document ).on( 'click', '.HeadingDiv', function () { /* This '.HeadingDiv' could be anything, I need something dynamic here */
$('.HeadingDiv').removeClass('active'); /* This '.HeadingDiv' could be anything, I need something dynamic here */
$(this).addClass('active');
});
});
有没有办法在元素上添加新的CSS类:hover？
喜欢jQuery,但翻译成CSS:
$(element).addClass('someclass');
想要改变盒子上的边框颜色..
..当用户将鼠标移出/移出时..
这是尝试过的代码..需要工作!
JQuery的:
<script>
$("result").hover(
function () {
$(this).addClass("result_hover");
},
function () {
$(this).removeClass("result_hover");
}
);
</script>
CSS3:
<style>
.result {
height: 72px;
width: 100%;
border: 1px solid #000;
}
.result_hover {
border: 1px solid #fff;
}
</style>
HTML5:
<div class="result">
<div class="item">
<div id="item1">
<i class="icon"></i> ##
</div>
</div>
<div>
谢谢你的期待
$(document).ready(function(){
$("#info-text-container").click(function(){
$("#info-text").delay(500).addClass("info-text-active");
});
});
单击它时不会对其造成延迟.我想要完成的.为什么这个可以克服,可以克服？谢谢!
我有以下HTML
<div id="testID" class="test1">
<img id="testID2" class="test2" alt="" src="some-image.gif" />
</div>
我基本上想要#testID2并用.test3类替换.test2类？
我试过了
jQuery('#testID2').find('.test2').replaceWith('.test3');
但这似乎不起作用？
有任何想法吗 ？
请帮忙.
为什么jquery addClass()不能使用event.target？我已经制作了一个代码,并且它应该在单击时在目标上添加类,但它不起作用,并且它说,e.target.addClass它不是一个函数.
码:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Class Test</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<style>
.big {
font-size: 5em;
}
.small {
font-size: 1em;
}
</style>
</head>
<body>
<p>This is the text</p>
<script>
$(function() {
$("p").click(function(e) {
$("a").removeClass("big").addClass("small");
$("this").addClass("big"); //This doesn't work
e.target.addClass("big"); //nor this one
});
});
</script>
</body>
</html>
addclass ×10
jquery ×9
removeclass ×5
css ×2
class ×1
delay ×1
dom ×1
events ×1
find ×1
hover ×1
javascript ×1
jquery-hover ×1
performance ×1
target ×1
toggleclass ×1