1

ページに一連の写真があり、その下にいくつかのテキスト情報といくつかのボタンがあります。

<div class="photowrapper">
 <div class="photowrapperphoto">
  <div class="photocontainer">image</div>
  </div>
 <div class="textwrapperphoto">
  <div class="textleftwrapperphoto">
   <div class="phototitle">photo_0001</div>
   <div class="photoprice">&pound;3.00</div>
   <div class="photosize">6 by 4 inch</div>
 </div>
 <div class="textrightwrapperphoto">
  <div class="photoaddbutton">Add</div>
  <div class="photoremovebutton">Delete</div>
 </div>
</div>

誰かが「photoaddbutton」をクリックすると、「photowrapperphoto」のクラスが修正されるように、jquery を入れたい (背景色を追加する)。

要素 photowrapperphoto を識別する方法がわかりません。

ページに上記の html がたくさんあります (つまり、画像がたくさんあります)。直前の「photowrapperphoto」を変更したいだけですが、現在使用しているjqueryはページ上のすべての「photowrapperphoto」クラスを変更します。

$(document).ready(function() {
 $('.photoaddbutton').click(function() {
  $('.photowrapperphoto').attr('class', 'photowrapperphotoselected');
 });
});

何か案は？

4

2 に答える 2

1

クラスを変更するのではなく、photowrapperphotoアイテムのクラスを維持しphotowrapperphoto、追加のクラスを追加することをお勧めします。selected

正しいものを変更するための JavaScript は次のようにphotowrapperphotoなります。

$(document).ready(function() {
    $('.photoaddbutton').click(function() {
        $(this)
            .closest('.photowrapper')   // go up in the DOM until .photowrapper
            .children('.photowrapperphoto') // go down one level to .photowrapperphoto 
            .addClass('selected');
    });
});

選択した に特別なスタイルを指定するにphotowrapperphotoは、CSS で次のようなルールを使用できます。

.photowrapperphoto.selected
{
    background-color: red;
}
于 2013-03-30T00:11:53.430 に答える
0 
$(document).ready(function() {
   $('.photoaddbutton').click(function() {
      $(this).closest('.photowrapper').find('.photowrapperphoto').prop('class', 'photowrapperphotoselected');
   });
});

ただし、クラスを別のものに置き換えるのではなく、クラスを追加および削除することをお勧めします。最初のクラスは要素の一般的な役割をマークし、2 番目のクラスは存在する場合の追加の役割をマークします。

于 2013-03-30T00:09:27.717 に答える