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

Question

我有以下显示和隐藏内容的代码，问题是当我单击“显示更多”时，它会打开所有其他部分，而不是我单击的特定部分，并且与“显示更少”相同

这是我的代码和 fiddle demo

fiddle Demo 2

$(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()函数查找显示更多或显示更少按钮属于哪个部分

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