我如何为带有动态添加内容的fancybox中的自定义按钮提供唯一的数据ID

如何解决我如何为带有动态添加内容的fancybox中的自定义按钮提供唯一的数据ID

我有一个漂亮的盒子，我在上面添加了两个自定义按钮：一个喜欢和不喜欢按钮。由于图像是动态添加到fancybox 的，我如何将实例image_id 绑定到喜欢和不喜欢按钮？

   $.fancybox.defaults.btnTpl.like = '<button data-fancybox-like class=" fa fa- thumbs-  o-up   fancybox-button fancybox-button--like" title="like"></button>';
   $.fancybox.defaults.btnTpl.dislike = '<button data-fancybox-dislike class=" fa fa-thumbs-o-down   fancybox-button fancybox-button--dislike" title="dislike"></button>';

   $.fancybox.defaults.buttons = [
    'slideShow','fullScreen','thumbs','like',// the new  like button
    'dislike',//the new dislike button
    'close'];


     

    //getting instance of the clicked like button

    $('body').on('click','[data-fancybox-like]',function(e) {
 var imgid =$.fancybox.getInstance().current.opts.$orig.data('img')
 var userr=$.fancybox.getInstance().current.opts.$orig.data('user_id');
 $clicked_btn=$("[data-liky='"+imgid+"']");
 
if ($clicked_btn.hasClass('fa-thumbs-o-up')) {//checking if PHP had marked the like button as unliked
                     reaction = 'like';
              } else if($clicked_btn.hasClass('fa-thumbs-up')){//the like button had already been liked. liking again unlikes
                        reaction = 'unlike';      
              }
              //change this to the full ajax format
                $.ajax({
                  url:"server.PHP",method:'POST',data:{reaction:reaction,imgid:imgid,user:user},success:function(data,status){}

我想将 PHP 端的 image_id 传递给下面添加的喜欢和不喜欢按钮
为fancybox添加喜欢和不喜欢按钮

difflib

代码运行良好。问题是喜欢和不喜欢按钮没有动态 id

解决方法

您不需要为这些按钮提供如此独特的 ID。

点击时，您已经可以检查它是喜欢还是不喜欢按钮...而且您已经拥有 imgid 和 user。

$.fancybox.defaults.btnTpl.like =
  '<button data-fancybox-like class="fas fa-thumbs-up fancybox-button fancybox-button--like" title="like"></button>';
$.fancybox.defaults.btnTpl.dislike =
  '<button data-fancybox-dislike class="fas fa-thumbs-down fancybox-button fancybox-button--dislike" title="dislike"></button>';

$.fancybox.defaults.buttons = [
  "slideShow","fullScreen","thumbs","like",// the new  like button
  "dislike",//the new dislike button
  "close"
];

//getting instance of the clicked like button

$("body").on("click","[data-fancybox-like],[data-fancybox-dislike]",function (e) {
  
  var imgid = $.fancybox.getInstance().current.opts.$orig.data("img");
  var user = $.fancybox.getInstance().current.opts.$orig.data("user_id");
  var reaction
  // $clicked_btn = $("[data-liky='" + imgid + "']");

  if ($(this).hasClass("fa-thumbs-up")) {
    //checking if php had marked the like button as unliked
    reaction = "like";
  } else if ($(this).hasClass("fa-thumbs-down")) {
    //the like button had already been liked. liking again unlikes
    reaction = "unlike";
  }
  
  console.log(reaction,"imgid:",imgid,"user:",user)
  //change this to the full ajax format
  // $.ajax({
  //   url: "server.php",//   method: "POST",//   data: { reaction: reaction,imgid: imgid,user: user },//   success: function (data,status) {}
  // });
});

/* Just for this demo */
.as-console-wrapper{
  max-height: 1.2em !important;
  z-index: 99999;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>


<a href="https://via.placeholder.com/150" data-fancybox="gallery" data-caption="Some caption 1" data-img="54" data-user_id="12" class="fancybox">
  <img src="https://via.placeholder.com/150" alt="Some descrition 1" />
</a>

<a href="https://via.placeholder.com/150" data-fancybox="gallery" data-caption="Some caption 2" data-img="72" data-user_id="28" class="fancybox">
  <img src="https://via.placeholder.com/150" alt="Some descrition 2" />
</a>