<a> элемент не работает должным образом при скрытии родительского элемента?

Question

Я сделал этот скрипт, и, несмотря на одну странность, он отлично работает. Он скрывает/показывает родительский элемент div с классом, содержащим определенный контент. Проблема при нажатии на мои <a> элементов, которые действуют как кнопки, они «фильтруют» 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> 

SCRIPT:

//--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> 

JS с preventDefault():

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