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

我建议您让photowrapperphoto项目保留其photowrapperphoto课程，并添加其他课程selected，而不是更改课程。

修改正确的photowrapperphoto的javascript可以是：

$(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;
}

Answer 2

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

但我建议添加和删除一个类，而不是替换另一个类。第一个类标记元素的通用角色，第二个类标记它在出现时的附加角色。

识别另一个div中的特定类元素

2 个答案: