使用 JQuery 仅在此 div 中显示/隐藏按钮

Question

作为练习，我正在尝试使用 jQuery 在一系列 div 中查看更多/查看更少的内容。我创建了按钮来触发查看更多和查看更少的事件，同时我在 div 展开时隐藏 "see more" 按钮，或者在 [=] 展开时隐藏 "see less" 按钮28=] 缩小了。

我的问题是，当用户单击按钮时，它会更改页面上的所有按钮，而不是特定 div 中的按钮。

我试过几种不同的方法来解决这个问题，但都没有成功。我有点了解如何使用 $(this) 以及如何遍历元素......但我无法解决这个问题。

这是我正在使用的 jQuery->

//hide "see less" button
$(".less-button").hide();
//capture click on more button
//add class to enlarge div
$(".more-button").click(function(){ 
  $(this).parent().addClass("more");
  //hide "see more" button
  $(".more-button").hide();
  //show "see less" button
  $(".less-button").show();
});
//capture click on less button
//remove class to shrink div
$(".less-button").click(function(){
  $(this).parent().removeClass("more");
  //hide "see less" button again
  $(".less-button").hide();
  //show "see more" button... again
  $(".more-button").show();
});

这是我的页面代码笔的 link-> http://codepen.io/seanpierce/pen/vNeVJm/

如有任何帮助，我们将不胜感激！

Answer 1

您只需要找到您点击的父按钮。

工作fiddle：https://jsfiddle.net/y3v0sr2y/

//hide "see less" button
$(".less-button").hide();
//capture click on more button
//add class to enlarge div
$(".more-button").click(function(){ 
  var parent = $(this).parent();
  parent.addClass("more");
  //hide "see more" button
  parent.find(".more-button").hide();
  //show "see less" button
  parent.find(".less-button").show();
});
//capture click on less button
//remove class to shrink div
$(".less-button").click(function(){
  var parent = $(this).parent();
  parent.removeClass("more");
  //hide "see less" button again
  parent.find(".less-button").hide();
  //show "see more" button... again
  parent.find(".more-button").show();
});

Answer 2

这样做：

$(".more-button").click(function(){ 
  $(this).parent().addClass("more");
  //hide "see more" button
  $(this).hide();
  //show "see less" button
  $(this).parent().find(".less-button").show();
 });
 //capture click on less button
  //remove class to shrink div
 $(".less-button").click(function(){
     $(this).parent().removeClass("more");
    //hide "see less" button again
    $(this).hide();
    //show "see more" button... again
    $(this).parent().find(".more-button").show();
 });

Answer 3

在偶数处理程序中，查找同级按钮： http://codepen.io/anon/pen/BowGJg

//hide "see less" button
$(".less-button").hide();
//capture click on more button
//add class to enlarge div
$(".more-button").click(function(){ 
  $(this).parent().addClass("more");
  //hide "see more" button
  $(this).hide();
  //show "see less" button
  $(this).siblings(".less-button").show();
});
//capture click on less button
//remove class to shrink div
$(".less-button").click(function(){
  $(this).parent().removeClass("more");
  //hide "see less" button again
  $(this).hide();
  //show "see more" button... again
  $(this).siblings(".more-button").show();
});

Answer 4

由于您在容器上切换类，只需使用 CSS 到 show/hide 适当的按钮：

JS:

// you don't need separate listeners
$(".more-button, .less-button").click(function(){ 
  // toggleClass will remove a class name if present or add if not. 
  // it can take multiple class names.
  $(this).parent().toggleClass("less more");
});

CSS:

/* hide .more-button inside .post element with class .more, 
   and .less-button inside .post element with class .less
 */
.post.more .more-button, .post.less .less-button {
  display:none;
}

演示 http://codepen.io/anon/pen/RWLqLe

使用 JQuery 仅在此 div 中显示/隐藏按钮

Using JQuery to show/ hide buttons only in this div

html

javascript

jquery

show

hide