[英]Javascript add a class to element in a different div
$(document).ready(function() { $('.btn').click(function() { $(this).parent().addClass('show'); }); })
<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>
当我们单击带有“ .btn”类的“单击此处”图像时。 我想向“ .hidden”类的图像添加“ .show”类。 我将其与jquery绑定在一起,但只能将一个类添加到父元素。
尝试这个:
$(this).closest('.container').find('.hidden').addClass('show');
但是,更好的做法是将一些data-
attribute添加到HTML中的适当元素,然后使用它们进行导航。 这可能意味着:
$(this).closest('[data-container]').find('[data-bookmark-image').addClass('show');
编辑:正如@sheriffderek所提到的,删除hidden
类可能也很有意义。
只需使用以下JS:
$('.btn').click(function() {
$(".hidden").addClass('show');
});
类别为“ hidden”的图像被选择为$(".hidden")
;
img
的父元素是a
标签。 将btn
类移到a
元素上,它将仍然有效。
在这种特定情况下,您可以通过使用相关的jQuery选择器将元素定位为隐藏类。
$(document).ready(function() {
$('.btn').click(function() {
$('.hidden').toggleClass('show');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.