Question

我正在尝试为fancybox中的图像添加一个类似功能。标题区域中的按钮应该是喜欢图片并查看喜欢次数的按钮

标题栏将下载链接写入最大的图像版本

在beforeShow块中，我正在读取图像库和图像并将其提交给likes.php-如果有喜欢，此脚本将在数据库中查看-一切正常-到最后是错误：

每张图片的liketext变量的内容越来越长而且我无法访问字幕区域的html内容

我如何写入阳离子区域？为什么liketext变量的内容不断增加？

<script>
  $( '[data-fancybox="gallery"]' ).fancybox({
    caption : function( instance, item ) {
            var caption = $(this).data('caption') || '';
            if ( item.type === 'image' ) {
                    caption = (caption.length ? caption + '<br />' : '') + '<a href="images/' + item.src.substring(14) + '" download="' + item.src.substring(14) + '">Download</a>' ;
            }
            return caption;
    },

    beforeShow : function( instance, current ) {
      var image_url = current.src;
      image_url = image_url.substring(14);
      var path_array = window.location.pathname.split('/');
      var gal_pfad = path_array[path_array.length-2];

      $.ajax({
        method: "POST",
        url: "likes.php",
        data: { gal: gal_pfad, image: image_url }
        })
        .done(function( msg ) {
          var response = msg.split('|');
          var like_count = response[0];
          var my_likes = response[1];
          var liketext = "";
            if (my_likes == 0) {
                  // display active like button
                  liketext += "Like!";
          }
          else {
            // display inactiv like button
            liketext += "i Like this already";
          }
          liketext += "liked by " + like_count + " persons";
          var captionbox = $( ".fancybox-caption" ).val();
          $( ".fancybox-caption" ).val( captionbox + liketext );
        });
      }
    })
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<a data-fancybox="gallery" href='images/middle_B68A0282.jpg'><img src='images/thumb_B68A0282.jpg' alt='' /></a>
<a data-fancybox="gallery" href='images/middle_B68A0286.jpg'><img src='images/thumb_B68A0286.jpg' alt='' /></a>
<a data-fancybox="gallery" href='images/middle_B68A0291.jpg'><img src='images/thumb_B68A0291.jpg' alt='' /></a>
<a data-fancybox="gallery" href='images/middle_B68A0299.jpg'><img src='images/thumb_B68A0299.jpg' alt='' /></a>
<a data-fancybox="gallery" href='images/middle_B68A0302.jpg'><img src='images/thumb_B68A0302.jpg' alt='' /></a>
<a data-fancybox="gallery" href='images/middle_B68A0306.jpg'><img src='images/thumb_B68A0306.jpg' alt='' /></a>
<a data-fancybox="gallery" href='images/middle_B68A0308.jpg'><img src='images/thumb_B68A0308.jpg' alt='' /></a>
<a data-fancybox="gallery" href='images/middle_B68A0316.jpg'><img src='images/thumb_B68A0316.jpg' alt='' /></a>
<a data-fancybox="gallery" href='images/middle_B68A0319.jpg'><img src='images/thumb_B68A0319.jpg' alt='' /></a>

Answer 1

为什么liketext变量的内容在增长？

因为您要将新内容添加到现有内容中，所以在这里：

var captionbox = $( ".fancybox-caption" ).val();
$( ".fancybox-caption" ).val( captionbox + liketext );

如果要设置新的html内容，请改用.html( htmlString )，请参见https://api.jquery.com/html/#html2

fancybox标题中的自定义内容

1 个答案: