Fatal编程技术网
  • html/
  • Html jquery中的appendTo替换旧div，而不是在其下添加新div

Html jquery中的appendTo替换旧div，而不是在其下添加新div

html jquery css

Html jquery中的appendTo替换旧div，而不是在其下添加新div,html,jquery,css,Html,Jquery,Css,我对这个代码有问题。我试图将新的div（newGallery）和图片附加到div（gallery）中，但它仍然在替换旧的div（gallery） 你能告诉我怎么解决吗？我认为它在ajax函数中存在一些问题。我正在使用jqueryv3.5.1 menu.on('click', 'a', function(event) { event.preventDefault(); var a = $(this), li = a.parent(), href

我对这个代码有问题。我试图将新的div（newGallery）和图片附加到div（gallery）中，但它仍然在替换旧的div（gallery）

你能告诉我怎么解决吗？我认为它在ajax函数中存在一些问题。我正在使用jqueryv3.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();
        });
    };
});

menu.on（'click'，'a'，函数（事件）{
event.preventDefault（）；
var a=$（此），
li=a.parent（），
href=a.attr（'href'），
loadingImg=$（''，{class:'msg fail'}），
msgText=‘我是诺曼托，但我是纳波达里罗·佐布拉齐’，
msgFail=msg.html（msgText）；
html（msgFail）；
//aj ked sa数据始终为v YKONA提供数据
}).always（函数（）{
//skrytie加载ikonky
加载img.hide（）；
});
};
});
这样试试

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);
  };


});

const gallery=$（'.gallery'）；
函数loadNewGallery（href）{
$.ajax({
url:href，
数据：'获取'，
数据类型：“html”，
//ak sa数据已完成
}).完成（功能（数据）{
var newGallery=$（数据）.find（'.gallery set'）；
//nacitany kus stranky cez ajax sa vlozi do画廊Nartvalo
新画廊。附录（画廊）；
//ak sa数据显示，vykona sa funkcia vo失败
}).fail（函数（）{
//斯普拉瓦·奥兹利哈尼·普雷诺苏
var msg=$（''）{
类：“msg失败”
}),
msgText=‘我是诺曼托，但我是纳波达里罗·佐布拉齐’，
msgFail=msg.html（msgText）；
html（msgFail）；
//aj ked sa数据始终为v YKONA提供数据
}).always（函数（）{
//skrytie加载ikonky
加载img.hide（）；
});
};
菜单.在（'click'，'a'，函数（事件）{
event.preventDefault（）；
var a=$（此），
li=a.parent（），
href=a.attr（'href'），
loadingImg=$（'这样试试


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);
  };


});



const gallery=$（'.gallery'）；
函数loadNewGallery（href）{
$.ajax({
url:href，
数据：'获取'，
数据类型：“html”，
//ak sa数据已完成
}).完成（功能（数据）{
var newGallery=$（数据）.find（'.gallery set'）；
//nacitany kus stranky cez ajax sa vlozi do画廊Nartvalo
新画廊。附录（画廊）；
//ak sa数据显示，vykona sa funkcia vo失败
}).fail（函数（）{
//斯普拉瓦·奥兹利哈尼·普雷诺苏
var msg=$（''）{
类：“msg失败”
}),
msgText=‘我是诺曼托，但我是纳波达里罗·佐布拉齐’，
msgFail=msg.html（msgText）；
html（msgFail）；
//aj ked sa数据始终为v YKONA提供数据
}).always（函数（）{
//skrytie加载ikonky
加载img.hide（）；
});
};
菜单.在（'click'，'a'，函数（事件）{
event.preventDefault（）；
var a=$（此），
li=a.parent（），
href=a.attr（'href'），

加载img=$（“如果你能更详细地解释你的答案就好了。例如：你做了什么改变，为什么上面的代码会起作用。。。etc@Swati
gallery
是在问题中的脚本片段中定义之前使用的。我只是在
gallery
元素中使用了
const
，将函数从
单击中删除nt…仅此而已。编写代码的方式应附加到
gallery
中。我的主要反对意见是
失败
，其中消息完全更改
gallery
元素的
innerHTML
。感谢您的回答，但它对我无效。它仍在覆盖一个div元素在gallery内部。@user2623507您是否也可以添加ajax调用中返回的典型HTML。正如我所见，您可以从ajax调用返回的数据中获得新的gallery集。此外，还有一些代码可以帮助重新创建问题（例如，添加gallery的HTML）@PeterDarmis我已经发现了问题。当我替换html（）时，这个命令给gallery.html（loadingImg.show（））带来了麻烦对于appendTo来说没问题。谢谢大家的帮助。如果你能更多地解释你的答案就好了。例如：你做了什么更改，为什么上面的代码可以工作。。。etc@Swati
gallery
在问题中出现的脚本片段中定义之前使用。我只是对
gallery
元素使用了
const
，删除了功能退出
点击
事件…仅此而已。编写代码的方式
newGallery
应附加到
gallery
。我的主要反对意见是
fail
消息完全更改
gallery
元素的
innerHTML
。感谢您的回答，但它对我不起作用。它仍在覆盖gallery中的一个div元素。@user2623507您是否也可以添加ajax调用中返回的典型HTML。正如我所见，您可以从ajax调用返回的数据中获得新的gallery集。此外，还有一些代码可以帮助重新创建该问题（例如，添加gallery的HTML）@PeterDarmis我已经发现了问题。这个命令给gallery.html（loadingImg.show（）；当我将html（）替换为appendTo时，它就可以了。谢谢大家的帮助。