另一个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; 
}