如何在"a href"为空时删除"css classes"

Question

我创建了一个自定义页面模板，我在其中使用WordPress帖子来获取图像(使用功能图像(，并从中制作了一个画廊。

<div class="box">
    <img class="img" src="<?php the_post_thumbnail_url(); ?>" style="width:100%"/>
    <div class="middle">
        <div class="pyete-vete">
            <a href="<?php echo the_field("peoplelink"); ?>" target="_blank">PYETE VETE</a>
        </div>
    </div>
</div>

现在，我想要实现的是当 HREF 为空时删除 .middleclass。

尝试了很多我在堆栈溢出上发现的方法，但到目前为止都没有成功。

谢谢。

Answer 1

考虑到the_field("peoplelink")是空的：

<div class="<?php echo empty(the_field("peoplelink")) ? 'middle' : ''; ?>">
    <div class="pyete-vete">
        <a href="<?php echo the_field("peoplelink"); ?>" target="_blank">PYETE VETE</a>
    </div>
</div>

Answer 2

你可以试试这个：

<div class="<?php if (the_field("peoplelink")){ echo 'middle'; } ?>">

Answer 3

你可以做这样的事情：

$('.middle').filter(function() {
  return $("a", this).attr("href") == "";
}).removeClass("middle");

演示

$('.middle').filter(function() {
  return $("a", this).attr("href") == ""
}).removeClass("middle")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
    <img class="img" src="<?php the_post_thumbnail_url(); ?>" style="width:100%"/>
    <div class="middle">
        <div class="pyete-vete">
            <a href="" target="_blank">PYETE VETE</a>
        </div>
    </div>
</div>

Answer 4

你可以做这样的事情(未经测试(：

if ($(".middle .pyete-vete a").attr('href') != '') { 
    $(".middle").removeClass("middle");
}

Answer 5

使用 jQuery each 函数遍历所有a标签并检查href是否为空。

$('a').each(function(e){
    if($(this).attr('href')=='')
        $(this).closest('.middle').remove()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
    <img class="img" src="<?php the_post_thumbnail_url(); ?>" style="width:100%"/>
    <div class="middle">
        <div class="pyete-vete">
            <a href="" target="_blank">PYETE VETE</a>
        </div>
    </div>
        <div class="middle">
        <div class="pyete-vete">
            <a href="sample.php" target="_blank">PYETE</a>
        </div>
    </div>
</div>