2011-10-24 21 views
31

を使用して、データ属性の値の更新:私は、次のHTMLコードを持ってjQueryの

<a class="toggle" href="#toggle"> 
    <img src="app/css/images/tock.png" alt="No" data-id="4" data-block="1"> 
</a> 

を、私はjQueryのを使用してsrcdata-block属性の値を更新します。これはどうすればいいですか?

更新:私は多くのイメージ要素を持っているので、data-idを使用して特定のイメージの値を更新したいとします。

答えて

74
$('.toggle img').data('block', 'something'); 
$('.toggle img').attr('src', 'something.jpg'); 

jQuery.dataおよびjQuery.attrを使用してください。

私は理解のためにあなたに別々にそれらを公開しています。

+0

私が言及するのを忘れて申し訳ありませんが、私は、データ-IDを使用して、特定のIMGを選択したい、セレクタは、例えばデータIDによって画像要素を選択する必要があります'$( 'toggle img [data-id = 4]')' –

+3

あなたはほとんどそこにいます: '$( 'togle img [data-id =" 4 "]')' –

+13

FWIW、データ属性を上書きするためには '.attr'を使わずに' .data'を使わなければなりません。これは、jQueryが要素にデータを添付できるので混乱しますが、データ属性がすでに存在する場合は、DOMに反映されない可能性があります。 –

2
$('.toggle img').data('block', 'something').attr('src', 'something.jpg'); 
+0

これは私が欲しいものではありません、私は私の質問を更新してください見てください。 –

7
$('.toggle img').each(function(index) { 
    if($(this).attr('data-id') == '4') 
    { 
     $(this).attr('data-block', 'something'); 
     $(this).attr('src', 'something.jpg'); 
    } 
}); 

または

$('.toggle img[data-id="4"]').attr('data-block', 'something'); 
$('.toggle img[data-id="4"]').attr('src', 'something.jpg'); 
+0

jQuery.dataではなくjQuery.attrを使用すると、この回答で提案されているように、一部のブラウザでバグが発生します。そこにいた。 – TheBigDoubleA

+5

データを使用することは本当に良い提案ですが、domの変更に依存する他のjqueryで問題を引き起こす元のdom要素を変更しないことに注意してください。 http://www.peterbe.com/plog/data-and-attr-in-jquery –

関連する問題