;重新回到原始状态

我试图在单击它时更改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？（差别是可见的）。

来源

2016-09-23 Diogo Cunha

你确定你想要的边框属性，或者你想要的CSS属性？我不确定你是否试图从CSS内部获得财产等，或者如果你正在尝试其他的东西。有点第一件事，但我跳了出来。 – Fallenreaper

所以你基本上想要改变属性和第一次点击并重置它，如果你点击两次正确的？ – utdev

jQuery'css'方法设置元素的内联样式，它不会为元素添加任意属性。 – Teemu

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

来源

2016-09-23 19:33:07

你的答案像一个魅力。这不是我的问题，但是当我创建多种类型的跨度时，一些跨度不会改变类。如果我有更多的这些跨班同班同学，我想要分别选择他们，我该怎么办？ –

您需要向span添加额外的类或创造性地使用选择器来区分它们 –

.css()和.attr()不能互换。 $(this).css('background')目标的DOM元素（即<div style="background: some_value;">的“背景”的场所，而$(this).attr('background')目标元素的属性命名为“背景”（即<div background="some_value">）

可惜你不能只是更改了.attr()检查if语句.css()因为边境的CSS属性不一定返回false或undefined（例如，如果它被设置为'none'）。更好的解决方案是创建和切换的一类，如独一无二的ChemistryBlob的答案。

来源

2016-09-23 19:39:08

你无法检测K边界与.attr（），因为它是CSS属性不是HTML属性，所以你可以尝试添加2个类与你想要的2个状态，并点击切换它们。

你可以试试这个片断：

$('.clickable_span').on('click', function() { 
 
    $(this).toggleClass('original-state after-click'); 
 
});

.original-state{ 
 
    background: dimgrey; 
 
    border:none; 
 
} 
 
.after-click{ 
 
    background: white; 
 
    border:1px solid black; 
 
}

<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>

来源

2016-09-23 19:49:15

;重新回到原始状态

回答

相关问题