Question

我有以下代码显示和隐藏内容，问题是当我点击＆＃34;显示更多＆＃34;它打开了所有其他部分，而不是我点击的那个特定部分和＆＃34;显示更少＆＃34;

这是我的代码和fiddle demo

$(document).ready(function() {
$("h4.showMore").on("click",function() {      $(this).parent().find(".hideResult").addClass("showResult").removeClass("hideResult");
      $(this).parent().find(".showMore").css("display", "none");
      $(this).parent().find(".showLess").css("display", "block");
});

$("h4.showLess").on("click",function() {

     $(this).parent().find(".showResult").removeClass("showResult").addClass("hideResult"); 
      $(this).parent().find(".showMore").css("display", "block");
      $(this).parent().find(".showLess").css("display", "none");
   }); 
});

Answer 1

演示：https://jsfiddle.net/8y1dp5ej/3/

在每个部分周围放置div

jsonVals += '<div class="newSection">';  // ADDED THIS
// the rest of the code with all the information
jsonVals += '</div>'; // ADDED THIS

然后使用.closest()函数查找哪个show more或show less按钮属于哪个部分

$("h4.showMore").on("click",function() {
    $(this).closest('.newSection').find(".hideResult").addClass("showResult").removeClass("hideResult");
    $(this).closest('.newSection').find(".showMore").css("display", "none");
    $(this).closest('.newSection').find(".showLess").css("display", "block");
});

JQUERY显示和隐藏无法正常工作

1 个答案: