Question

我在点击它时尝试更改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（＆＃39; border＆＃39;）在将该属性赋予元素后仍等于undefined？（差异可见）。

Answer 1

更简单的方法是使用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" );

Answer 2

.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的答案中。

Answer 3

您无法检查.attr（）的边框，因为它是css属性而不是html属性，因此您可以尝试添加2个具有所需状态的类，并在点击时切换它们。

您可以尝试以下代码段：

＆＃13;

$('.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;

单击更改属性上的Html;重新回到原始状态

3 个答案: