另一個DIV

Question

我有一系列的照片頁面上，其中有他們下面一些文字資料和一些按鈕內確定一個特定的類元素：

<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> 

我希望把一些jQuery的，這樣，當有人點擊'photoaddbutton'，它修改'photowrapperphoto'類（添加背景顏色）。

我似乎無法弄清楚如何識別元素photowrapperphoto。

我在頁面上加載了上面的html（即圖片加載）。我只是想立即在之前的'photowrapperphoto'改變，但目前我正在使用的jQuery更改頁面上的所有'photowrapperphoto'類。

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

任何想法？

Answer 1

$(document).ready(function() { 
    $('.photoaddbutton').click(function() { 
     $(this).closest('.photowrapper').find('.photowrapperphoto').prop('class', 'photowrapperphotoselected'); 
    }); 
}); 

但我建議添加和刪除一個類，而不是用另一個替換一個類。第一類標誌着元素的通用角色，第二類標誌着它在存在時的額外作用。

Answer 2

我建議你讓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; 
}