Javascript 仅替换Fancybox中附加div的内容一次_Javascript_Jquery_Html

Javascript 仅替换Fancybox中附加div的内容一次

javascript jquery html

Javascript 仅替换Fancybox中附加div的内容一次,javascript,jquery,html,Javascript,Jquery,Html,我使用了fancybox并在每个图像中添加了文本div内容。附加的文本div内容工作正常。但当我单击“下一步”按钮时，文本div内容会为每个图像附加两次。如何仅附加一次该div内容 $('.proBox').fancybox({ thumbs : { autoStart : true, axis : 'x' }, idleTime : 0, buttons : [ 'info', 'close','thumbs' ], a

我使用了fancybox并在每个图像中添加了文本div内容。附加的文本div内容工作正常。但当我单击“下一步”按钮时，文本div内容会为每个图像附加两次。如何仅附加一次该div内容

$('.proBox').fancybox({

  thumbs : {
    autoStart : true,
    axis      : 'x'
  },
  idleTime : 0,
  buttons : [
    'info', 'close','thumbs'
  ],





    afterShow: function( instance, current ) {

        var url = window.location.href;
        var cat = url.substring(url.lastIndexOf('#') + 1);
        var cats = cat.split('-');
        catId= cats[0];
        var toolbar = "<div id='tools'>"+$('#addscetion div').eq(this.index).html()+ "</div>";
            var index=catId+$("[data-fancybox-index]").html();
            $('.fancybox-slide').children(".imagecontainer").remove();

            // This is the div content that I am appending
            $(".fancybox-slide").append(toolbar);
            $(".fancybox-slide").append($('#'+index).html());

        },
      caption : function( instance, obj ) {
        return '<div><p class="fancy-nav"><a data-fancybox-prev title="Previous" tabindex="1">&lsaquo;</a> <a data-fancybox-next title="Next" tabindex="2">&rsaquo;</a> &nbsp; <span data-fancybox-index></span> of <span data-fancybox-count></span> images</p>' + $(this).find('.caption').html() + '</div>';
      },

      onInit: function(instance) {
                    instance.$refs.container.on('touchstart', '[data-fancybox-info]', function(e) {
                      e.stopPropagation();
                      e.preventDefault();

                      instance.$refs.container.toggleClass('fancybox-vertical-caption');
                    });
                    instance.$refs.container.on('mouseenter', '[data-fancybox-info]', function(e) {
                      instance.$refs.container.addClass('fancybox-vertical-caption');
                      instance.$refs.caption.one('mouseleave', function(e) {
                        instance.$refs.container.removeClass('fancybox-vertical-caption');
                      });

                    });
                    instance.$refs.container.on('click', '[data-fancybox-captionimg]', function(e) {
            $(".fancybox-image").attr("src",this.src);
          });
          instance.$refs.container.on('click', '[data-fancybox-captionbtn]', function(e) {
            $('.fancyRightCont').slideToggle('slow');
          });

                  }

    });

$（'.proBox'）.fancybox({
拇指：{
自动启动：对，
轴：“x”
},
空闲时间：0，
按钮：[
“信息”、“关闭”、“拇指”
],
afterShow:函数（实例，当前）{
var url=window.location.href；
var cat=url.substring（url.lastIndexOf（“#”）+1）；
变量cats=分类（'-'）；
catId=猫[0]；
var toolbar=“”+$（“#addscetion div”）.eq（this.index）.html（）+”；
var index=catId+$（“[data fancybox index]”）html（）；
$（'.fancybox幻灯片'）.children（“.imagecontainer”）.remove（）；
//这是我附加的div内容
$（“.fancybox幻灯片”）.append（工具栏）；
$（“.fancybox幻灯片”）.append（$（'#'+index.html（））；
},
标题：函数（实例，obj）{
返回图像的“&lsaquo；”+$（此项）。查找（'.caption'）.html（）；
},
onInit：函数（实例）{
实例.$refs.container.on（'touchstart'，'data fancybox info'，函数（e）{
e、 停止传播（）；
e、 预防默认值（）；
实例.$refs.container.toggleClass（'fancybox-vertical-caption'）；
});
实例.$refs.container.on（'mouseenter'，'data fancybox info'，函数（e）{
实例。$refs.container.addClass（'fancybox-vertical-caption'）；
实例.$refs.caption.one（'mouseleave'，函数（e）{
实例.$refs.container.removeClass（'fancybox-vertical-caption'）；
});
});
实例.$refs.container.on（'click'，'data fancybox captionimg'），函数（e）{
$（“.fancybox image”）.attr（“src”，this.src）；
});
实例.$refs.container.on（'click'，'data fancybox captionbtn]'，函数（e）{
$（'.fancyRightCont'）。滑动切换（'slow'）；
});
}
});

您可以先从

.fancybox幻灯片中删除附加的html数据，然后像这样附加html
$(".fancybox-slide").html('');
$(".fancybox-slide").append(toolbar);
$(".fancybox-slide").append($('#' + index).html());

试试下面的代码
$('.proBox').fancybox({

  thumbs: {
    autoStart: true,
    axis: 'x'
  },
  idleTime: 0,
  buttons: [
    'info', 'close', 'thumbs'
  ],

  afterShow: function(instance, current) {

    var url = window.location.href;
    var cat = url.substring(url.lastIndexOf('#') + 1);
    var cats = cat.split('-');
    catId = cats[0];
    var toolbar = "<div id='tools'>" + $('#addscetion div').eq(this.index).html() + "</div>";
    var index = catId + $("[data-fancybox-index]").html();
    $('.fancybox-slide').children(".imagecontainer").remove();

    // This is the div content that I am appending
   $(".fancybox-slide").html('');
   $(".fancybox-slide").append(toolbar);
   $(".fancybox-slide").append($('#' + index).html());


  },
  caption: function(instance, obj) {
    return '<div><p class="fancy-nav"><a data-fancybox-prev title="Previous" tabindex="1">&lsaquo;</a> <a data-fancybox-next title="Next" tabindex="2">&rsaquo;</a> &nbsp; <span data-fancybox-index></span> of <span data-fancybox-count></span> images</p>' + $(this).find('.caption').html() + '</div>';
  },

  onInit: function(instance) {
    instance.$refs.container.on('touchstart', '[data-fancybox-info]', function(e) {
      e.stopPropagation();
      e.preventDefault();

      instance.$refs.container.toggleClass('fancybox-vertical-caption');
    });
    instance.$refs.container.on('mouseenter', '[data-fancybox-info]', function(e) {
      instance.$refs.container.addClass('fancybox-vertical-caption');
      instance.$refs.caption.one('mouseleave', function(e) {
        instance.$refs.container.removeClass('fancybox-vertical-caption');
      });

    });
    instance.$refs.container.on('click', '[data-fancybox-captionimg]', function(e) {
      $(".fancybox-image").attr("src", this.src);
    });
    instance.$refs.container.on('click', '[data-fancybox-captionbtn]', function(e) {
      $('.fancyRightCont').slideToggle('slow');
    });

  }

});

$（'.proBox'）.fancybox({
拇指：{
自动启动：对，
轴：“x”
},
空闲时间：0，
按钮：[
“信息”、“关闭”、“拇指”
],
afterShow:函数（实例，当前）{
var url=window.location.href；
var cat=url.substring（url.lastIndexOf（“#”）+1）；
变量cats=分类（'-'）；
catId=猫[0]；
var toolbar=“”+$（“#addscetion div”）.eq（this.index）.html（）+”；
var index=catId+$（“[data fancybox index]”）html（）；
$（'.fancybox幻灯片'）.children（“.imagecontainer”）.remove（）；
//这是我附加的div内容
$（“.fancybox幻灯片”）.html（“”）；
$（“.fancybox幻灯片”）.append（工具栏）；
$（“.fancybox幻灯片”）.append（$（'#'+index.html（））；
},
标题：函数（实例，obj）{
返回图像的“&lsaquo；”+$（此项）。查找（'.caption'）.html（）；
},
onInit：函数（实例）{
实例.$refs.container.on（'touchstart'，'data fancybox info'，函数（e）{
e、 停止传播（）；
e、 预防默认值（）；
实例.$refs.container.toggleClass（'fancybox-vertical-caption'）；
});
实例.$refs.container.on（'mouseenter'，'data fancybox info'，函数（e）{
实例。$refs.container.addClass（'fancybox-vertical-caption'）；
实例.$refs.caption.one（'mouseleave'，函数（e）{
实例.$refs.container.removeClass（'fancybox-vertical-caption'）；
});
});
实例.$refs.container.on（'click'，'data fancybox captionimg'），函数（e）{
$（“.fancybox image”）.attr（“src”，this.src）；
});
实例.$refs.container.on（'click'，'data fancybox captionbtn]'，函数（e）{
$（'.fancyRightCont'）。滑动切换（'slow'）；
});
}
});
您能否添加您在dex.php中尝试过的完整代码------------------请尝试回答。希望它能帮助你我想在每张图片上显示一个文本图像。在脚本文件（“.fancybox幻灯片”）中添加（“”）$（“.fancybox幻灯片”）.append（$（“#”+index.html（））；上述代码运行良好。但是，当单击fancy Box中的“下一步”按钮时，centerdiv类会附加两次。单击图像时，不会显示任何图像。而不是显示“undefined”。好的，然后从PHP代码中解析HTML并将其放入您的问题中。然后我们将进一步讨论。我的原始代码运行良好，只是div被附加了两次。我只想为每个图像添加一次。是的，我理解这个场景。但我想复制它，这样我就可以为你解决它。