jQuery突出顯示效果不適用於Bootstrap的行類

我在我的網站上使用jQuery和Bootstrap 3。我有一張使用Bootstrap的表格分類獲得不同顏色的行的表。有幾行從Bootstrap中添加了「危險」類，以紅色顯示該行。我也有幾個錨點，它們跳到一個特定的行，並且我希望該行爲對行有一個臨時突出顯示，因此用戶知道他們跳到哪一行。jQuery突出顯示效果不適用於Bootstrap的行類

如果跳轉到的行沒有添加「危險」類，則突出顯示可以正常工作，但是如果該行具有危險等級，則不會發生突出顯示。

這裏的表（某程度冷凝）

<div class="table-responsive"> 
    <table class="table table-striped table-condensed"> 
    <tr id="11111-row" class="class1 class2 "> 
     <td><a name="11111">blah</td> 
     <td><a href="#33333" onclick="flashRow(33333)">33333</a>)</td> 
    </tr> 
    <tr id="22222-row" class="class1 class2 "> 
     <td><a name="22222">blah</td> 
     <td><a href="#44444" onclick="flashRow(44444)">44444</a>)</td> 
    </tr> 
    <tr id="33333-row" class="class1 class2 "> 
     <td><a name="33333">blah</td> 
     <td><a href="#77777" onclick="flashRow(77777)">77777</a>)</td> 
    </tr> 
    <tr id="44444-row" class="danger class1 class2 "> 
     <td><a name="44444">blah</td> 
     <td><a href="#88888" onclick="flashRow(88888)">88888</a>)</td> 
    </tr> 
    </table> 
</div>

這裏的flashRow JavaScript函數：

function flashRow(bug_id){ 
    row = $('#'+bug_id+"-row"); 
    row.effect("highlight", {color:"#669966"}, 10000) 
}

當我點擊鏈接在11111行，則跳轉到行33333，行正確突出顯示。當我點擊第22222行的鏈接時，它跳轉到第44444行，但由於該行有「危險」類（這使該行有紅色背景），所以我沒有看到高亮顯示。

如果我使用瀏覽器檢查器，我可以看到在任何情況下，當我點擊效果仍然發生時，但引導程序「危險」類阻止其工作。

我該如何讓它起作用？

https://jsfiddle.net/eyr5ouy9/5/

來源

2016-02-05 zoidberg

那麼它是在這個意義上，JavaScript是改變危險行的風格「工作」，但危險類已修改該行的背景顏色。這可能與css的特殊性有關，而在bootstrap的css中，我想你會找到一組相當特殊的選擇器來到達危險行，所以只需將樣式設置爲背景X（這就是突出顯示的功能）不足以覆蓋它。您可以刪除高亮效果期間的類嗎？（如果你使用的是Chrome或FF，你可以看效果「發生」通過右鍵單擊元素，去檢查，並在控制檯手錶在TR上

會發生什麼的元素標籤試試這個：jsfiddle

function flashRow(bug_id) { 
    row = $('#' + bug_id + "-row"); 
    var hasDanger = row.hasClass('danger'); 
    var self = this; 
    row.removeClass('danger') 
    row.effect("highlight", { 
    color: "#669966" 
    }, 1000, 
    function(){if(hasDanger){row.addClass('danger');}}) 
}

來源

2016-02-05 17:03:21

正如我所說的，我使用的檢查。我看到的是，當我點擊鏈接時，躍升至暫時排有一個額外的「style = background-image：none; background-color：rgb（x，y，z）」屬性，這個效果發生了。我認爲任何「style =」attrib CSS中的utes應該優先於任何其他基於類的樣式。 – zoidberg

哦！對不起，我沒有仔細閱讀。遺憾的是，我對CSS的瞭解不多，但我在這裏的小提琴奏效（刪除課程並在動畫完成後將其添加回去）。希望有更多的知識會出現，並解釋爲什麼風格不起作用。 –

我本來希望有一個可以與Bootstrap本地結合使用的解決方案，但是這對我來說已經足夠了。 – zoidberg

嘗試切換類，而不是jsfiddle.net/dem4hsse/2

來源

2016-02-05 17:07:29

如果你真的想要10秒的動畫，你總是可以選擇CSS轉換http://www.w3schools.com/css/css3_transitions.asp –

我不想切換類。我只想快速向用戶顯示他們去過哪一行。10秒鐘的動畫只能讓我看到效果過程中會發生什麼。 jsfiddle有1秒的動畫。 – zoidberg

jQuery突出顯示效果不適用於Bootstrap的行類

回答

相關問題