在WordPress上使用jQuery动态插入的锚标签不起作用

Question

我有以下代码：

$(".div-img").each(function() {

        var maxHeight = 700;
        var imgHeight = $(this).height();

        if (imgHeight > maxHeight) {
            $(this).append('<a href="<?php echo the_permalink();?>" 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'
            });
        }

    });

如果条件为真，则这段代码在div之后插入一个锚标记，一切正常，但是href部分，当我尝试单击插入的锚标记时，它会将我带到该URL <?php%20echo%20the_permalink();?> ，我已经尝试使用变量，但仍然无法正常工作：

$(".div-img").each(function() {

        var maxHeight = 700;
        var imgHeight = $(this).height();
        var permalink = $(".view-content").attr("href", "<?php echo the_permalink(); ?>");

        if (imgHeight > maxHeight) {
            $(this).append('<a href="" 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'
            });
        }

    });

Answer 1

如果php标签位于.php页面中，则该标签只会进行转换，因为服务器将php标签转换为html，而服务器仅将php代码转换为php文件中的代码。 只需将代码放在php文件的<script>标记内，或将文件扩展名更改为php，然后将脚本放在<script>标记内，并使用include包含文件。

回答：

方法1

将页面的扩展名从.js更改为.php。 然后在脚本标记内添加javascript。

您的.php（已更改为.php文件的.js文件）应如下所示：

<script type="text/javascript"> //Text Javascript is not neccessary but it's for some downgraded browsers which have not html5 support
$(".div-img").each(function() {

    var maxHeight = 700;
    var imgHeight = $(this).height();

    if (imgHeight > maxHeight) {
        $(this).append('<a href="<?php echo the_permalink();?>" 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>

然后将php页面插入到另一个php页面，使用include ， require或require_once

例：

<?php include'path/filename.php';?> // Using Include
<?php require'path/filename.php';?> // Using Require
<?php require_once''path/filename.php';?> // Using require once

何时使用include，require和require_once

require()函数与include()和require_once()相同，区别在于它以不同的方式处理错误。 如果发生错误，include（）函数将生成警告，但脚本将继续执行。 require（）会产生致命错误，脚本将停止，而在require_once() PHP将检查是否已包含该文件，如果已包含，则不要再次包含它。

方法二

将脚本复制到希望在<script>标记中显示的php页面，因此您的php页面应如下所示：

<?php /* Php codes */ ?>
//Html stylings and tags
<script type="text/javascript"> //Text Javascript is not neccessary but it's for some downgraded browsers which have not html5 support
$(".div-img").each(function() {

    var maxHeight = 700;
    var imgHeight = $(this).height();

    if (imgHeight > maxHeight) {
        $(this).append('<a href="<?php echo the_permalink();?>" 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>

尽管我建议使用方法二，因为它可以减少页面加载时间，但是您可以选择所需的最佳方法。