javascript - jQuery改变图像不透明度onclick

Question

我有一个图片“画廊”，每张图片下方都有一个选择按钮。当我单击与每个图像相关的按钮时，我希望图像不透明度更改为 0.5。我宁愿在没有每个图像都有单独的 id 的情况下这样做。警告:我的 jQuery 知识非常一般，我无法完全理解其中的一些知识!

<div>
    Group 1<br>
    <img src="http://www.example.com/myimage1.png" class="my-img" /><br>
    <button class="mybutton">Click</button>
</div>
<br>
<div>
    Group 2<br>
    <img src="http://www.example.com/myimage2.png" class="my-img" /><br>
    <button class="mybutton">Click</button>
</div>

因此，使用这样的代码，单击任何按钮都会淡化该类的所有图像，而不仅仅是相关图像

$('.mybutton').click(function(){
    $('.my-img').css("opacity","0.5");
});

我考虑过使用 .prev() 之类的东西，但我认为我的头脑没有正确地围绕它并且实现错误。

$('.mybutton').click(function(){
    $(this).prev('.my-img').css("opacity","0.5");
});

关于如何处理这个问题有什么想法吗？

https://jsfiddle.net/sanfly/gbkz566b/3/

Answer 1

按钮的前一个元素是 br。因此，在这种情况下，您必须转到父级的根目录并找到 img 的子级并更改其不透明度

$('.mybutton').click(function() {
  $(this).parent().find('img.my-img').css("opacity", "0.5");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  Group 1
  <br>
  <img src="http://i.stack.imgur.com/Hl3Y0.png" class="my-img" />
  <br>
  <button class="mybutton">
    Click
  </button>
</div>
<br>
<div>
  Group 2
  <br>
  <img src="http://i.stack.imgur.com/Hl3Y0.png" class="my-img" />
  <br>
  <button class="mybutton">
    Click
  </button>
</div>