时间戳

首页 > 解决方案 > jQuery中的appendTo替换旧的div insted，在其下添加新的div

html - jQuery中的appendTo替换旧的div insted，在其下添加新的div

问题描述

我对这段代码有疑问。我正在尝试将带有图片的新 div (newGallery) 附加到 div (gallery) 但它仍在替换旧的。

你能告诉我如何解决它吗？我认为它在ajax函数内部有一些麻烦。我正在使用 jquery v3.5.1。

menu.on('click', 'a', function(event) {

    event.preventDefault();

    var a = $(this),
        li = a.parent(),
        href = a.attr('href'),
        loadingImg = $('<img>', {src: 'img/5.svg', class: 'loading-img'}),
        id = '#' + href.slice(0, -5),
        isLoaded = gallery.find(id),
        currentGallery = gallery.find('.gallery-set'),
        galleries = $('.gallery-set');

    if (li.hasClass('selected')) return;

    li.addClass('selected')
      .siblings().removeClass('selected');
    //zobrazenie loading ikony pokial sa obsah nenacita
    gallery.html(loadingImg).show();
    gallery.find('div').fadeOut();

    if ( galleries.attr("id") == id ) {
        currentGallery.hide();
        gallery.find(id).fadeIn();

    } else {
        loadNewGallery(href);
    };

    function loadNewGallery (href) {
        var gallery = $('.gallery');

        $.ajax({
            url: href,
            data: 'GET',
            dataType: 'html',
        // ak sa data nacitaju vykona sa funkcia v done
        }).done( function( data ) {
            var newGallery = $(data).find('.gallery-set');

                //nacitany kus stranky cez ajax sa vlozi do gallery natrvalo
                newGallery.appendTo(gallery);

        // ak sa data nenacitaju vykona sa funkcia vo fail
        }).fail( function() {
            // sprava o zlyhani prenosu
            var msg = $('<div>',{class: 'msg-fail'}),
                msgText = 'Je nám ľúto, danú stránku sa nepodarilo zobraziť',
                msgFail = msg.html(msgText);

            gallery.html(msgFail);
        // aj ked sa data nacitaju alebo nenacitaju vykona sa funkcia v always
        }).always(function() {
            // skrytie loading ikonky
            loadingImg.hide();
        });
    };
});

标签： htmljquerycss

解决方案

试试这个方法...

const gallery = $('.gallery');

function loadNewGallery(href) {
  $.ajax({
    url: href,
    data: 'GET',
    dataType: 'html',
    // ak sa data nacitaju vykona sa funkcia v done
  }).done(function(data) {
    var newGallery = $(data).find('.gallery-set');

    //nacitany kus stranky cez ajax sa vlozi do gallery natrvalo
    newGallery.appendTo(gallery);

    // ak sa data nenacitaju vykona sa funkcia vo fail
  }).fail(function() {
    // sprava o zlyhani prenosu
    var msg = $('<div>', {
        class: 'msg-fail'
      }),
      msgText = 'Je nám ľúto, danú stránku sa nepodarilo zobraziť',
      msgFail = msg.html(msgText);

    gallery.html(msgFail);
    // aj ked sa data nacitaju alebo nenacitaju vykona sa funkcia v always
  }).always(function() {
    // skrytie loading ikonky
    loadingImg.hide();
  });
};


menu.on('click', 'a', function(event) {
  event.preventDefault();
  var a = $(this),
    li = a.parent(),
    href = a.attr('href'),
    loadingImg = $('<img>', {
      src: 'img/5.svg',
      class: 'loading-img'
    }),
    id = '#' + href.slice(0, -5),
    isLoaded = gallery.find(id),
    currentGallery = gallery.find('.gallery-set'),
    galleries = $('.gallery-set');

  if (li.hasClass('selected')) return;

  li.addClass('selected')
    .siblings().removeClass('selected');
  //zobrazenie loading ikony pokial sa obsah nenacita
  gallery.html(loadingImg).show();
  gallery.find('div').fadeOut();

  if (galleries.attr("id") == id) {
    currentGallery.hide();
    gallery.find(id).fadeIn();

  } else {
    loadNewGallery(href);
  };


});

推荐阅读