Question

作为练习，我尝试使用jQuery在一系列div中查看更多内容/更少内容。我创建了按钮来触发查看更多内容并查看更少的事件，同时我隐藏了＆＃34;看到更多＆＃34;当div被展开时按钮，或者＆＃34;看到更少＆＃34;当div缩小时按钮。

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

我尝试过几种不同的方法来解决这个问题但没有成功。我有点理解如何使用$（this）以及如何遍历元素......但是我无法解决这个问题。

以下是我与之合作的jQuery - ＆gt;

//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();
});

这是指向我的codepen for the page-＆gt;的链接 http://codepen.io/seanpierce/pen/vNeVJm/

非常感谢任何帮助！

Answer 1

在偶数处理程序中，查找兄弟按钮： 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 2

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

工作小提琴：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 3

这样做：

$(".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 4

由于你正在切换容器上的类，只需使用CSS来显示/隐藏适当的按钮：

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

demo http://codepen.io/anon/pen/RWLqLe

使用JQuery仅在此div

4 个答案: