jquery - クラスのcss属性を変更する方法

Question

私は次<span>のように内部にあります<div>：

<div id="#mydiv">
<a href="#">Hello</a><span class="myImageArea"></span>
    <div class="someClass">
    </div>
</div>

次の CSS を使用します。

.myImageArea {  
    background: url("../img/upArrow.png") no-repeat right 5px;
    display: inline-block;
    cursor: pointer;
}

background:urlクラスの属性を変更したいmyImageArea

$('#mydiv').click(function() {
    //change the background image of the class
});

これはどのように行うことができますか？

score 5 · Accepted Answer

クリック関数内で、jQueryのセレクターを使用して、クリックした要素への参照を取得し、その中のスパンを検索できるようになりました。それができたら、CSSプロパティ'background-image'を変更できます。

$('#myDiv').click(function() {
    $('.myImageArea', this).css('background-image', 'newimagepath.png');
});

score 4 · Accepted Answer

さらに良いことに、属性を直接設定する代わりに、カスタム CSS クラス (例: myFancyBackground) を追加できます。クラスを追加するには、次を使用します。

$('#myDiv').click(function() {
    $('.myImageArea', this).addClass('myFancyBackground');
});

そしてcssファイルには次のものがあります：

.myFancyBackground {
  background-image:url('...');
}

したがって、将来、画像や繰り返しなどの背景のプロパティを変更したい場合は、CSS を変更するだけで済みます。

score 2 · Accepted Answer

$('#mydiv').click(function() {
   $(this).find('.myImageArea').css('background-image', 'url("/path/to/new/image.jpg")');
});

score 1 · Accepted Answer

css()これは、jQueryのメソッドを使用してオンザフライで実行できます。

$('#mydiv').click(function(){
    $('.myImageArea', this).css({'background-image':'url(path/to/new/image.png)'});
});

4 に答える 4