ФЭНДОМ


  • Однажды мы с вхе думали сделать такую штуку, с которой картинки в чате можно будет раскрывать по клику и скукоживать обратно так же. Прямо как в куклоскрипте. Но что-то оно не работает. Что не так?

    $(document).ready(function () {
        setInterval(function() {
                if (document.getElementsByClassName("chatags-image") != null) {
                    $(document).append(getready(document.getElementsByClassName));    // Если есть новое изображение - инициализируем его
                }
            }
            , 500);
    });
    
    var i = 0;
    
    function getready(swap) {
        return '<div class="ready" onclick="toggle('+this+')"><img id="poppable' + i++ + '" src="' + swap.text() +'"></div>'; // А именно передаем сюда и создаем для него событие onclick
    }
    
    function toggle(elem)                   // Переключаем видимость
    {
        if(elem.display == none)
            elem.display = block;
        else if (elem.display == block)
            elem.display = none;
    }
    
      Загрузка редактора
    • От Fuzzz: Однажды мы с вхе думали сделать такую штуку, с которой картинки в чате можно будет раскрывать по клику и скукоживать обратно так же. Прямо как в куклоскрипте. Но что-то оно не работает. Что не так?

      $(document).ready(function () {
          setInterval(function() {
                  if (document.getElementsByClassName("chatags-image") != null) {
                      $(document).append(getready(document.getElementsByClassName));    // Если есть новое изображение - инициализируем его
                  }
              }
              , 500);
      });
      
      var i = 0;
      
      function getready(swap) {
          return '<div class="ready" onclick="toggle('+this+')"><img id="poppable' + i++ + '" src="' + swap.text() +'"></div>'; // А именно передаем сюда и создаем для него событие onclick
      }
      
      function toggle(elem)                   // Переключаем видимость
      {
          if(elem.display == none)
              elem.display = block;
          else if (elem.display == block)
              elem.display = none;
      }
      
      1. У вас, кхм, постоянный интервал. Его обычно только в крайних случаях используют. Я скинул пример, если нужно что-то отслеживать в сообщениях чата.
      2. У вас в toggle none и block используются как переменные, а не обычные строки. Оберните их в одинарные или двойные кавычки.

      Можно просто делегировать нужное событие на класс chatags-image:

      !function (window) {
          var document = window.document,
          room = document.getElementById('Chat_' + window.mainRoom.roomId);
          document.addEventListener('DOMContentLoaded', function fn(event) {
              room.addEventListener('click', function (event) {
                  if (event.target instanceof window.Node && event.target.classList.contains('chatags-image')) {
                      event.target //Сделать что-то, если цель клика имеет класс chatags-image
                  }
                  this.removeEventListener('DOMContentLoaded', fn);
              });
          })
      }(this);

      Или же вручную добавлять обработчик каждому элементу chatags-image и полностью контролировать содержимое сообщения:

      !function (window) {
          var document = window.document,
          room = document.getElementById('Chat_' + window.mainRoom.roomId);
          document.addEventListener('DOMContentLoaded', function fn(event) {
              window.mainRoom.model.chats.bind('afteradd', function () {
                  var msg = room.querySelector('ul > li[data-user]:last-child > span.message');
                  //Сделать что-то с последним мессажем
              });
              this.removeEventListener('DOMContentLoaded', fn);
          });
      }(this);

      Ну а далее можно сделать CSS анимацию для плавного появления пикчи и т.п. Я так и не понял что конкретно требуется (скрытие, анимация или другое?), поэтому только частично поправил.

        Загрузка редактора
    • Участник ФЭНДОМА
        Загрузка редактора
Мне нравится это сообщение
Вам понравилось это сообщение!
Посмотреть кто добавил «Мне нравится»
Материалы сообщества доступны в соответствии с условиями лицензии CC-BY-SA , если не указано иное.