Javascript 点击更改属性时的Html；重新单击返回原始状态

我试图更改跨度元素的属性，例如单击它时的边框和背景色。我还想在再次单击时将元素属性重置为以前的状态。然而，我不能做得很好。我接受任何类型的解决方案，包括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语句（I console.logged），因此它会更改元素的方面，但不会将其重置回原始状态。代码有什么问题？为什么$（this.attr（'border'）在将该属性赋予元素后仍然等于undefined？（差别是显而易见的）。

一个更简单的方法是使用

toggleClass（）

：

当删除

.original

时，会添加

.change\u css

，反之亦然

jQueryUI的

switchClass（）

也可以使用（单击查看文档）：

.css（）

和

.attr（）

不能互换

$（this）.css（'background'）

针对DOM元素的'background'样式属性（即

），而

$（this）.attr（'background'）

针对元素上名为'background'的属性（即

）

---

不幸的是，您不能将

.attr（）

检查

if

语句更改为

.css（）

，因为border css属性不一定返回

false

或

undefined

（例如，如果设置为

'none'

）。更好的解决方案是创建并切换一个类，如唯一的ChemistryBlob的答案所示。

您不能使用.attr（）检查边框，因为它是css属性而不是html属性，因此您可以尝试添加两个具有所需两种状态的类，并在单击时切换它们

您可以尝试以下代码段：

$（'.clickable_span'）。在（'click'，function（）上{
$（this）.toggleClass（“单击后的原始状态”）；
})；

。原始状态{
背景：灰色；
边界：无；
}
.点击后{
背景：白色；
边框：1px纯黑；
}

单击我！

你确定要使用border属性，还是css属性？我不确定你是否试图从css中获取属性，等等……或者你是否尝试了其他方法。这是我首先想到的。因此，你基本上想更改属性，并在单击后重置属性k两次正确？jQuery

css

方法设置元素的内联样式，它不会向元素添加任意属性。你的答案很有魅力。这不是我的问题，但当我创建多个此类跨度时，某些跨度不会改变类。当我有多个相同类别的跨度时，我该怎么办s和我想分别选择它们中的每一个？您需要在跨度中添加一个额外的类，或者创造性地使用选择器来区分它们

.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");

});

$(this).switchClass( "original", "change_css" );