Htmlクリックの変更プロパティ。

Question

私はそれをクリックすると、境界線や背景色などのスパン要素のプロパティを変更しようとしています。私はまた、再度クリックされたときに、以前のものに要素のプロパティをリセットしたい。しかし、私はそれを正しく行うことができません。私は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'); 

    } 

}); 

それがあれば最初の文を入力し続ける（私はconsole.logged）ので、それは要素の様相は変わりますが、元の状態に戻ってそれをリセットしません。コードの何が間違っていますか？なぜ$（this）.attr（ 'border'）は、そのプロパティを要素に与えた後でも未定義と同じですか？ （差異は目に見える）。

Answer 1

Aはるかに簡単な方法はtoggleClass()を使用することであろう。

.change_css { background: white; border: 1px solid black; } 
.original { background: dimgrey; border: none; } 

<span class="original">....</span> // start your span with a class 

両方のクラス切り替え：.originalよう

$('.clickable_span').click(function() { 

    $(this).toggleClass("original").toggleClass("change_css"); 

}); 

を除去する.change_cssを添加し、その逆。

jQueryUIのswitchClass()も（ドキュメントのためのhereをクリックしてください）動作します：

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

Answer 2

.css()と.attr()は互換性がありません。 $(this).css('background')ターゲットDOM要素（すなわち<div style="background: some_value;">の「背景」スタイルプロパティを、$(this).attr('background')ターゲット属性要素の「背景」という名前（すなわち<div background="some_value">）

は、残念ながら、あなただけで.attr()チェックを変更することはできませんしながら、 .css()からifステートメント（それは'none'に設定すると、たとえば）ボーダーCSSプロパティは必ずしもfalseまたはundefinedを返しませんので。より良い解決策は唯一ChemistryBlobの答えのように、クラスを作成して切り替えることであろう。

Answer 3

あなたはチェコできませんあなたが望む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>