javascript - 如何使用 jquery 或 javascript 隐藏空的 href 值按钮

Question

当我尝试隐藏 href 属性中没有值的按钮时，jquery 代码出现问题，如何正确修复？我的代码:

<a id="tw" href=""> Twitter</a>
<a id="fb" href="http://m.facebook.com"> Facebook</a>

<script>
$('#tw').each(function() {
    if($('#tw').attr('href') === '') {
        $(this).parents('#tw').hide();
    }
});
</script>

Answer 1

您需要选择所有链接a 并检查href 属性，您只选择了一个(#tw)

$('a').each(function() {
  if (!$(this).attr('href')) {
    $(this).hide();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="tw" href=""> Twitter</a>
<a id="fb" href="http://m.facebook.com"> Facebook</a>

更好的是，使用 css 选择器获取带有空 href 的链接并隐藏它们:

$('a[href=""]').hide();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="tw" href=""> Twitter</a>
<a id="fb" href="http://m.facebook.com"> Facebook</a>
<a id="other" href=""> Another link</a>

或者只是 css:

a[href=""]{
  display: none;
}

<a id="tw" href=""> Twitter</a>
<a id="fb" href="http://m.facebook.com"> Facebook</a>
<a id="other" href=""> Another link</a>