jQuery改变图像不透明度onclick答案

【问题标题】：jQuery to change image opacity onclickjQuery改变图像不透明度onclick
【发布时间】：2017-08-03 12:44:50
【问题描述】：

我有一个图像“图库”，每个图像下方都有一个选择按钮。当我单击与每个图像相关的按钮时，我希望图像不透明度更改为 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/

【问题讨论】：

可能有点令人困惑，prev() 总是以紧接在前的元素为目标，尽管它需要一个参数。传递给.prev() 的参数指定它应该仅在紧邻元素也匹配参数选择器时触发。在这种情况下，它只会针对具有 my-img 类的 <br> 标签 :)

标签： javascript jquery css

【解决方案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>

【讨论】：

谢谢，虽然这确实有效，但我已将 .siblings() 答案标记为正确

【解决方案2】：

prev() 只获取紧接在前面的兄弟，即<br> 标签。您的选择器正在寻找类为my-img 的元素。由于<br> 标记没有此类，因此查询不会返回任何内容。

由于每个父级只有一个按钮和一个图像，您可以改用siblings()。

$('.mybutton').click(function() {
  $(this).siblings('.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>

【讨论】：