<a> 元素在隐藏父项时无法正常工作？答案

【问题标题】：<a> element not working properly when hiding parent?<a> 元素在隐藏父项时无法正常工作？
【发布时间】：2015-11-02 15:57:05
【问题描述】：

我制作了这个脚本，尽管有一点奇怪，但它运行良好。它隐藏/显示具有包含特定内容的类的 div 元素的父级。当我按下充当按钮的<a> 元素时的问题，它们“过滤”了div，但它留下了第一条评论<a>？如果我更改元素，则使用<div> 而不是问题，但是使用<a> 元素它的行为会很奇怪？这只是一个错误还是？

这是一个JSFiddle： https://jsfiddle.net/g1puxhs7/2/

HTML：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>

<a class='viewBtn'>Published<a>
<a class='viewBtn'>Completed<a>
<a class='viewBtn'>Created<a>


<div class="orders" id="orders">

    <div class="row">
        <div class="status">
        Completed
        </div>
        <a>Comment</a>
  </div>

       <div class="row">
        <div class="status">
        Completed
        </div>
        <a>Comment</a>
  </div>

       <div class="row">
        <div class="status">
        Completed
        </div>
        <a>Comment</a>
        </div>
   </div>

   <style>
   .row {
  width: 200px;
  margin: 10px;  
  background: #ccc;
  padding: 4px;
  }
 </style>

脚本：

//--Filter by Status--//
$('.viewBtn').click(function() {
var txt = $(this).text();
  $('.status:contains("' + txt + '")').parent().toggle();
$(this).toggleClass('down');
});

【问题讨论】：

您的 HTML 标记无效，请再次检查
也许你今天休息了，但下次可以使用任何 HTML 验证器轻松检查，无论它是内置于 NotePad++、Sublime Text 还是任何 IDE 或在线 HTML 验证器脚本。祝你的项目好运。
好的，非常感谢:)

标签： javascript jquery html show-hide

【解决方案1】：

问题在于您的链接：

<a class='viewBtn'>Published<a>
<a class='viewBtn'>Completed<a>
<a class='viewBtn'>Created<a>

您有 6 个开始 a 标签，而不是 3 个开始和 3 个结束标签。

这就是为什么浏览器会在你的脚本中的很多地方添加结束 a 标签，其中一个在你的第一个 div 中——然后你的整个 DOM 树看起来与你想要的不同。

【讨论】：

哇，让我们都同意我是个白痴。这真是漫长的一天 xD，谢谢！

【解决方案2】：

您的标记需要清理。这是您清理的标记。另外，我发现最好为锚标签添加href，然后你可以用#注释掉它们，或者你可以添加javascript:void(0)。如果你使用 # 方法，在你的 JS 中，你可以添加 e.preventDefault();

HTML 清理：

<div>
    <a class='viewBtn' href="#">Published</a>
    <a class='viewBtn' href="#">Completed</a>
    <a class='viewBtn' href="#">Created</a>
</div>

<div class="orders" id="orders">

    <div class="row">
        <div class="status">
        Completed
        </div>
        <a class="stuff" onclick="Comment">Comment</a>
    </div>

    <div class="row">
        <div class="status">
        Completed
        </div>
        <a class="stuff">Comment</a>
    </div>

    <div class="row">
        <div class="status">
        Completed
        </div>
        <a class="stuff">Comment</a>
    </div>
</div>

带有 preventDefault() 的 JS：

$('.viewBtn').click(function(e) {
    e.preventDefault();
    var txt = $(this).text();
    $('.status:contains("' + txt + '")').parent().toggle();
    $(this).toggleClass('down');
});

【讨论】：