<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>隱藏父項時元素無法正常工作？

回答

相關問題