Question

＆＃13;

$(document).ready(function() { 
   
    $('.btn').click(function() {
        $(this).parent().addClass('show');	
    });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <div class="row">
       <h4 id="txt1">Bookmark 1</h4>
       <a href="#" class="bokmarksave"> <img src="https://vignette.wikia.nocookie.net/secondlife/images/2/2b/Box.png/revision/latest?cb=20120226073326" class="hidden" width="100"></a>
      <p> Lorem Ipsum is simply dummy text of the printing and </p>
       <p class="page_num">Page 3 </p>
   </div>
   <div class="bookmark_icon"> 
      <a href="#"><img src="http://www.pngall.com/wp-content/uploads/2016/05/Click-Here-PNG-Images.png" width="100"class="btn"></a> 
   </div>
</div>

＆＃13;

当我们点击＆＃34;点击此处＆＃34;图像用＆＃34; .btn＆＃34;类。我想添加一个＆＃34; .show＆＃34;使用＆＃34; .hidden＆＃34;对图像进行分类类。我用jquery绑了这个，但我只能在父元素中添加一个类。

Answer 1

试试这个：

$(this).closest('.container').find('.hidden').addClass('show');

但是，更好的做法是将一些data-属性添加到HTML中的相应元素，然后使用它们进行导航。这可能意味着这样的事情：

$(this).closest('[data-container]').find('[data-bookmark-image').addClass('show');

编辑：正如@sheriffderek所提到的，删除hidden类可能也是有意义的。

Answer 2

只需使用以下JS：

$('.btn').click(function() {

  $(".hidden").addClass('show');

});

“隐藏”类的图像被选为$(".hidden");

Answer 3

img的父元素是a标记。将btn类移至a元素，它仍然有效。

Answer 4

在这种特定情况下，您可以使用相关的jQuery选择器，使用 hidden 类来定位元素。

$(document).ready(function() { 
    $('.btn').click(function() {
       $('.hidden').toggleClass('show');
    });
});

Javascript在不同的div中为元素添加一个类

4 个答案: