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

Question

我制作了这个脚本，尽管有一点奇怪，但它运行良好。它是 hiding/showing div 元素的父元素，class 包含特定内容。当我按下我的 <a> 元素时出现问题，它们充当按钮，它们 "filter" divs，但它留下第一个评论 <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');
});

Answer 1

问题出在您的链接上：

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

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

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

Answer 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');
});

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

<a> element not working properly when hiding parent?

html

javascript

jquery

show-hide