如何在jquery中添加一个永久链接的锚标记

How to append anchor tag with jquery having a permalink in it?

本文关键字:一个 链接 jquery 添加      更新时间:2023-09-26

我有一个图片库,当其中一张图片的高度达到700px时,它将被截断,并添加一个标签,如下所示:

我使用这个代码:

<script type="text/javascript">
                jQuery(document).ready(function($){
                    $(".div-img").each(function() {
                      var maxHeight = 699;
                      var imgHeight = $(this).height();
                      if ( imgHeight > maxHeight) {
                      $(this).append('<a href="<?php the_permalink();?>" data-evt="EntryLongPost" class="view-full-content view-content external-link fa-external-link-square">View Full Content<span class="crop"></span></a>').find(".cropping-a").css({'max-height':'500px', 'overflow':'hidden', 'display': 'block'});  
                      }
                      });
                  });
              </script>

代码正在工作,因为每次都正确地添加锚标记,但href属性正在为符合标准的所有图像采取相同的链接,我已经阅读了这是因为php代码在服务器端执行,所以它只运行一次,这就是为什么它只抓取第一个图像的链接。我已经尝试了一个函数,隐藏锚标记,然后使其从js代码块可见,但不工作,尝试将代码放在functions.php文件中,但也不工作。

你可以像这样使用jQuery获取图像的源代码:

<script type="text/javascript">
    jQuery(document).ready(function($){
        $(".div-img").each(function() {
            var maxHeight = 699;
            var imgHeight = $(this).height();
            var href = $(this).attr('src');
            if ( imgHeight > maxHeight) {
                $(this).append('<a href="' + href + '" data-evt="EntryLongPost" class="view-full-content view-content external-link fa-external-link-square">View Full Content<span class="crop"></span></a>').find(".cropping-a").css({'max-height':'500px', 'overflow':'hidden', 'display': 'block'});  
            }
        });
    });
</script>