Question

我有一个＆＃39;画廊＆＃39;每个下面都有一个选择按钮的图像。当我点击与每个图像相关的按钮时，我希望图像不透明度变为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>

Answer 2

prev()只能获得前一个兄弟，这就是<br>标记。您的选择器正在查找类my-img的元素。由于<br>标记没有此类，因此查询不会返回任何内容。

由于每个父母只有一个按钮和图片，因此您可以使用siblings()。

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery改变图像不透明度onclick

2 个答案: