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

-3

我做了这个脚本，尽管有一个奇怪之处，但它工作正常。它隐藏/显示包含特定内容的类的div元素的父级。当我按下我的<a>元素时，会出现按钮问题，他们会“过滤”div，但会留下第一个注释<a>？如果我改变元素做一个<div>而不是没有问题，但与一个<a>元素它表现奇怪吗？这只是一个错误还是？<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>

SCRIPT：

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

来源

2015-11-02 William Larsen Bang

你的HTML标记是无效的，检查一遍 –

也许你有一个休息日，但下一次这可以使用任何HTML验证程序轻松进行检查，无论它是否内置到NotePad ++，Sublime Text或任何IDE或联机HTML验证程序脚本中。祝你的项目好运。 – Pegues

好的，非常感谢:) –

问题是与你的链接：

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

你有6个a标签，而不是3开3个结束标记。

这就是为什么浏览器会在一堆地方添加关闭a标记的原因，其中一个地方在您的第一个地方div-然后您的整个DOM树看起来与您想要的不同。

来源

2015-11-02 16:07:05 Ynhockey

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

您的标记需要清理。这是你的标记清理。另外，我发现最好为你的锚标签添加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>

JS用preventDefault（）方法：

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

来源

2015-11-02 16:07:25 Pegues

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

回答

相关问题