0

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

我的 JS 代码就是这样工作的，但是当我有超过 1 个 .editor 时它会出现问题。Fe当我在title1上更改字体时，我想在title2上更改字体不是通过title2加载新的div .fonts-container，而是通过将css更改为display：block来显示.fonts-container。

我怎样才能使这个 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");
    } 
 });
4

1 回答 1

1

每次使用$(".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");
    } 
});
于 2013-10-22T13:26:13.777 回答