我在点击它时尝试更改span元素的属性,例如边框和背景颜色。我还想将元素属性重置为它们曾经是什么,再次单击它。但是我无法正确地做到这一点。我接受任何类型的解决方案,包括Jquery。实际上我的代码目前是Jquery:
$('.clickable_span').click(function() {
if($(this).attr('border') == undefined || $(this).attr('border') == false) {
$(this).css('background', 'white');
$(this).css('border', '1px solid black');
}
else if($(this).attr('border') == true) {
$(this).css('background', 'dimgrey');
$(this).css('border', 'none');
}
});
它不断进入第一个if语句(我console.logged),因此它改变了元素的方面,但没有将其重置回原始状态。代码有什么问题?为什么 $(this).attr(' border')在将该属性赋予元素后仍等于undefined? (差异可见)。
答案 0 :(得分:5)
更简单的方法是使用toggleClass()
:
.change_css { background: white; border: 1px solid black; }
.original { background: dimgrey; border: none; }
<span class="original">....</span> // start your span with a class
然后切换两个类:
$('.clickable_span').click(function() {
$(this).toggleClass("original").toggleClass("change_css");
});
删除.original
后,会添加.change_css
,反之亦然。
jQueryUI的switchClass()
也可以使用(点击here了解文档):
$(this).switchClass( "original", "change_css" );
答案 1 :(得分:1)
.css()
和.attr()
不可互换。 $(this).css('background')
定位的背景是&#39; DOM元素的样式属性(即<div style="background: some_value;">
,而$(this).attr('background')
将元素命名为&#39; background&#39;作为元素(即<div background="some_value">
)
很遗憾,您无法将.attr()
语句中的if
项检查更改为.css()
,因为border css属性不一定会返回false
或undefined
(例如,如果它设置为'none'
)。一个更好的解决方案是创建和切换课程,如在The One and Only ChemistryBlob的答案中。
答案 2 :(得分:1)
您无法检查.attr()的边框,因为它是css属性而不是html属性,因此您可以尝试添加2个具有所需状态的类,并在点击时切换它们。
您可以尝试以下代码段:
$('.clickable_span').on('click', function() {
$(this).toggleClass('original-state after-click');
});
&#13;
.original-state{
background: dimgrey;
border:none;
}
.after-click{
background: white;
border:1px solid black;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="clickable_span original-state">Click me!</span>
&#13;