1

jQuery を使用して、html5 データ属性が追加されたページに表示する一連の画像を操作する必要があります。value1 と value2 を持つすべての画像のデータ値を取得する方法はありますが、そうでない画像は無視します。つまり、ページ上のすべての画像を循環して、これらの属性の存在を探す必要があります。

画像を表示するコードは次のとおりです。

<% @pictures.each do |picture| %>
  <%= link_to image_tag(picture.photo.url(:full),  
              :class => "picture_list_item",
              :data => {:value1 => picture.value1, :value2 => picture.value2}, 
              :id => "picture_" + picture.id.to_s),
              picture_path(:id => picture.id) %>
<% end %>
4

3 に答える 3

2

jQueryはこれをかなり苦痛のないものにするはずです。

$("img[data]").each(function(){
    //do something with each individual image.
});

またはこれだけ：

$("img[data]").doSomething();
//doSomething to all.

これにより、データ属性を持つすべての画像が選択されます。それらすべてを一度に操作することも.each()、選択した画像を一度に1つずつ操作するために使用することもできます。

これがデモンストレーションするフィドルです：http：//jsfiddle.net/SLdk4/1/

于 2012-06-07T21:09:20.520 に答える
0

これらの各値を表すクラスを追加してから、クラスセレクターを使用してそれらを操作できるようにすることをお勧めします。

于 2012-06-07T21:09:41.963 に答える
0 
$('#parent img[data]').each(function(){
       var data = $(this).attr('data').split(',');
       var data_1 = data[0];                         // retrieve first data
       var data_2 = data[1];                         // retrieve second data
       console.log( data_1 +' '+ data_2 );           // or use 'alert' to test
});

jsFiddle デモ

.each()
.attr()
.split()

于 2012-06-07T21:15:06.153 に答える