javascript-如何在带有永久链接的jquery中添加锚标签？

Question

我有一个图片库，当其中一个图片达到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文件中，但也不起作用。

Answer 1

您可以像这样使用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>