Добавление div с load () на иконку для многих братьев и сестер

Question

Добавление div с load () на иконку для многих братьев и сестер

0

У меня проблемы с моими динамически добавленными редакторами. Я хочу иметь возможность добавлять div.fonts-container при щелчке по значку.icon-size, но когда div уже загружен, его можно скрыть, щелкнув снова на том же значке и gettig css: display: none. Затем, когда значок снова нажимается, div снова не загружается, это просто изменение css для отображения: block.

Мой JS-код работает так, но он глючит, когда у меня больше 1.editor. Fe, когда я меняю шрифт на title1, и чем я хочу изменить шрифт на title2, это не загрузка нового div.fonts-container по заголовку2, а.fonts-container появляется на title1, меняя css на display: block.

Как я могу сделать эту работу 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");
    } 
 });

lipenco 22 окт. 2013, в 15:33

Источник

Теги:

javascript

jquery

1 ответ

Ещё вопросы

Barmar · Accepted Answer · 2013-10-22T11-14-00.000Z

Каждый раз, когда вы используете $(".fonts-container") он возвращает все 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");
    } 
});