Question

我的动态添加编辑器有问题。我希望能够在点击图标.icon-size时附加div .fonts-container，但是当div已经加载时，可以通过再次点击相同的图标来隐藏它，并通过gettig css：display：none。然后当再次单击图标时，不会再次加载div，它只是将css更改为display：block。

我的JS代码就是这样的，但是当我有超过1个.editor时，它就是错误的。 F.E.当我在title1上更改字体时，并且我想更改title2上的字体是不是通过title2加载新的.fonts-container而是.fonts-container通过将css更改为display：block来显示在title1上。

如何让这个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>

这是我的越野车js：

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

Answer 1

每次使用$(".fonts-container")时，它都会返回 all 与该类相关的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");
    } 
});

在图标上添加带有load（）的div点击许多兄弟姐妹

1 个答案: