Javascript 在图标上添加带有load（）的div单击多个同级

我的动态添加编辑器有问题。我希望能够将div.fonts容器附加到click on icon.icon size上，但是当div已经加载时，可以通过再次单击同一个图标和获取css:display:none来隐藏它。 然后，当再次单击图标时，div不会再次加载，它只是将css更改为display:block

我的JS代码就是这样工作的，但是当我有超过1.editor时，它就有问题了。F.e.当我更改标题1上的字体时，我想更改标题2上的字体，而不是通过标题2加载新的div.fonts容器。字体容器通过将css更改为display:block显示在标题1上

如何使这个JS在多个div.editor上工作

<div class="editor ui-resizable ui-draggable">
   <h2 class="text2" style="font-size: 3em;">Title1</h2>
   <img class="icon-font" src="/assets/font_size2.png" style="z-index: 2;">
   <img class="icon-size" src="/assets/font_size2.png" style="z-index: 2;">
   <div class="fonts-container" style="display: none;">
</div>

<div class="editor ui-resizable ui-draggable">
   <h2 class="text2" style="font-size: 3em;">Title2</h2>
   <img class="icon-font" src="/assets/font_size2.png" style="z-index: 2;">
   <img class="icon-size" src="">
   <div class="fonts-container" style="display: none;">
</div>

<div class="editor ui-resizable ui-draggable">
   <h2 class="text2" style="font-size: 3em;">Title3</h2>
   <img class="icon-font" src="/assets/font_size2.png" style="z-index: 2;">
   <img class="icon-size" src="">
   <div class="fonts-container" style="display: none;">
</div>

标题1
标题2
标题3

这是我的童车：

$(document).on('click', '.icon-size', function() { 
  $('.fonts-size-container').hide().hide();
  if ( !$(this).hasClass("active") ) {
      $(this).addClass("active");
         if ( !$(".fonts-container").hasClass("active")) {
            $(this).parent().append("<div class='fonts-container'></div>");
            $(".fonts-container").load("/fonts.html", null,
            function (responseText, status, response) {});
            $(".fonts-container").addClass("active");
        } else {
          $('.fonts-container').css("display" , "block");
        }
    } else {
       $('.fonts-container').hide("slow");
       $(this).removeClass("active");
    } 
 });

$（document）.on（'click'，'icon size'，function（）{
$（'.fonts大小容器'）.hide（）.hide（）；
if（！$（this.hasClass（“活动”））{
$（此）.addClass（“活动”）；
if（！$（“.fonts容器”）.hasClass（“活动”））{
$（this.parent（）.append（“”）；
$（“.fonts容器”）.load（“/fonts.html”，null，
函数（responseText、status、response）{}；
$（“.fonts容器”）.addClass（“活动”）；
}否则{
$（'.fonts container'）.css（“显示”、“块”）；
}
}否则{
$（'.fonts container'）.hide（“慢”）；
$（此）.removeClass（“活动”）；
} 
});

每次使用

$（“.fonts container”）

它都会返回该类的所有div，而不仅仅是与单击的图像相关联的div。您需要使用DOM遍历函数查找该元素

$(document).on('click', '.icon-size', function() { 
    $('.fonts-size-container').hide();
    var $this_container = $(this).next(".fonts-container");
    if ( !$(this).hasClass("active") ) {
        $(this).addClass("active");
        if ( !$this_container.hasClass("active")) {
            $(this).parent().append("<div class='fonts-container'></div>");
            $this_container.load("/fonts.html", null,
                                       function (responseText, status, response) {});
            $this_container.addClass("active");
        } else {
            $this_container.css("display" , "block");
        }
    } else {
        $this_container.hide("slow");
        $(this).removeClass("active");
    } 
});

$（document）.on（'click'，'icon size'，function（）{
$（'.fonts大小容器'）.hide（）；
var$this_container=$（this.next（“.fonts container”）；
if（！$（this.hasClass（“活动”））{
$（此）.addClass（“活动”）；
if（！$this_container.hasClass（“活动”））{
$（this.parent（）.append（“”）；
$this_container.load（“/fonts.html”），null，
函数（responseText、status、response）{}；
$this_container.addClass（“活动”）；
}否则{
$this_container.css（“显示”、“块”）；
}
}否则{
$this_container.hide（“慢”）；
$（此）.removeClass（“活动”）；
} 
});