Обновить содержимое в одном div со всеми именами div одинаковыми

Кажется, что застрял, пытаясь обновить изображения только в выбранном div, когда все имена div одинаковы.

<div class="collapse">img img img img img</div>
<div class="collapse">img img img img img img img</div>
<div class="collapse">img img img </div>
<div class="collapse">img img img img img img</div>

У меня есть данные изображений, установленные внутри тега data-src, и когда div расширяется, он загружает изображения. Однако, поскольку у div'ов одно и то же имя класса, когда он загружает изображения в расширенный div, он загружает все изображения во все свернутые div.

    $(function() {
      $('.collapse img').attr('src', function(index, src) {
         return this.getAttribute('data-src');
      });
    });

Это код внутри моего кода расширения, как его можно изменить, чтобы загружать только изображения в текущем выбранном div?

Изменить - развернуть код:

$.fn.toggler = function(options) {
    var o = $.extend({}, $.fn.toggler.defaults, options);

    var $this = $(this);
    $this.wrapInner('<a style="display:block; color: #fff; text-decoration: none;" href="#" title="Expand/Collapse" />');
    if (o.initShow) {$(o.initShow).addClass('shown');}
    $this.next(o.cllpsEl + ':not(.shown)').hide();
    return this.each(function() {
      var container;
      (o.container) ? container = o.container : container = 'html';
      if ($this.next('div.shown').length) { $this.closest(container).find('.shown').show().prev().find('a').addClass('open'); }
      $(this).click(function() {



        $(function() {
          $('.collapse img').attr('src', function(index, src) {
             return this.getAttribute('data-src');
          });
        });



        $(this).find('a').toggleClass('open').end().next(o.cllpsEl)[o.method](o.speed);
        return false;
    });
});};

Изменить 2 - Как расширяется div. Извините, я все еще новичок на этом сайте. Должен был дать больше информации.

Это javascript вверху страницы:

  <script type="text/javascript">
    $(function() {
      $("span.expand").toggler({method: "toggle", speed: 0});
    });
  </script>

Диапазон, по которому щелкают, чтобы развернуть div:

<span class="expand">&nbsp;</span>

Диапазон настраивается в css для отображения изображения в качестве фона.

Изменить: нашел решение.

Я размещен:

$(this).find('a').toggleClass('open').end().next(o.cllpsEl)[o.method](o.speed);

Над кодом показа изображения, чтобы он сначала переключал его, прежде чем пытаться загрузить изображения, и изменил код изображения загрузки на:

    $(function() {
      $this.closest(container).find('.collapse:visible img').attr('src', function(index, src) {
         return this.getAttribute('data-src');
      });
    });

Всем спасибо: P


jquery collapse
person WMI    schedule 27.01.2012    source источник
comment
Как расширяются ваши div? Как узнать, какой div выбран?   -  person Francis Lewis    schedule 28.01.2012
comment
Где ваш расширенный код div?   -  person aziz punjani    schedule 28.01.2012
comment
Пом, при чем тут PHP? Я взял на себя смелость удалить тег, мне это кажется чисто клиентским javascript.   -  person Wrikken    schedule 28.01.2012
comment
Отредактировано с решением   -  person WMI    schedule 28.01.2012

Ответы (4)


arrow_upward
1
arrow_downward

Предполагается, что вы обрабатываете свое расширение, щелкнув соответствующий div.

$(".collapse").click(function() {
    // code that handles expanding 
    // ....

    $(this).children("img").attr('src', function(index, src) {
        return this.getAttribute('data-src');
    });
});
person jffrynpmr    schedule 27.01.2012
comment
В предоставленном коде wrapInner используется для обертывания дочерних элементов элемента this, поэтому элементы изображения, скорее всего, не являются дочерними элементами элементов .collapse. - person Jasper; 28.01.2012

arrow_upward
1
arrow_downward

Вы подключаете обработчик событий, используя $(), что является сокращением для «когда документ готов», а затем говорите «для каждого .collapse img, сделайте это». Там нет ничего, что предлагало бы что-то «отобрать». Теперь предположим, что под «выбранным» вы имеете в виду «нажал». В этом случае вам нужно сделать что-то вроде:

$(function() {
  $('.collapse').click(function () {
    $(this).children('img').attr('src', function(index, src) {
     return this.getAttribute('data-src');
    });
  });
});

Теперь каждый щелчок div.collapse запускает код для установки src изображений.

(Я предполагаю, что это все еще не совсем то, что вы имеете в виду, но, вероятно, ближе)

person Rytmis    schedule 27.01.2012
comment
В предоставленном коде wrapInner используется для обертывания дочерних элементов элемента this, поэтому элементы изображения, скорее всего, не являются дочерними элементами элементов .collapse. - person Jasper; 28.01.2012
comment
В этом случае, вероятно, подойдет замена .children () на .find (). Во всяком случае, OP так сильно изменился, что мой ответ, вероятно, НАМНОГО устарел. :-) - person Rytmis; 28.01.2012

arrow_upward
1
arrow_downward

При расширении вы можете использовать ключевое слово $(this) в коде расширения и получить текущий развернутый узел.

$(this).find('img').attr('src', function() {  return $(this).data('src');  });
person aziz punjani    schedule 27.01.2012

arrow_upward
1
arrow_downward 

$.fn.toggler = function(options) {
    var o = $.extend({}, $.fn.toggler.defaults, options);

    var $this = $(this);
    $this.wrapInner('<a style="display:block; color: #fff; text-decoration: none;" href="#" title="Expand/Collapse" />');
    if (o.initShow) {$(o.initShow).addClass('shown');}
    $this.next(o.cllpsEl + ':not(.shown)').hide();
    return this.each(function() {
      var container;
      (o.container) ? container = o.container : container = 'html';
      if ($this.next('div.shown').length) { $this.closest(container).find('.shown').show().prev().find('a').addClass('open'); }
      $(this).click(function() {


          //right here `this` refers to the same this from above: `$(this).click(...`
          $.each($(this).find('img'), function () {

              //right here `this` refers to the current image, since we are looping over all the images
              $(this).attr('src', $(this).attr('data-src'));
          });


        $(this).find('a').toggleClass('open').end().next(o.cllpsEl)[o.method](o.speed);
        return false;
    });
});};

Я предполагаю, что this является одним из элементов .collapse, и в этом случае мы находим изображение в выбранном элементе .collapse и изменяем только его атрибут src.

Обратите внимание, что вам не нужен $(function () {}) (document.ready обработчик событий) внутри вашего кода. Его следует использовать для инициализации таких плагинов.

person Jasper    schedule 27.01.2012
comment
$(this).find('img').attr('data-src') это будет ссылаться на div, а не на изображение. Он должен быть заключен в анонимную функцию. - person aziz punjani; 28.01.2012
comment
Я понимаю вашу точку зрения. Сначала я написал его, думая, что на каждый блок приходится одно изображение. Я обновлю ответ. Спасибо. - person Jasper; 28.01.2012