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

Question

我在我的網站上使用jQuery和Bootstrap 3。 我有一個使用Bootstrap的表條紋類的表來獲取不同顏色的行。 其中幾行從Bootstrap中添加了“ danger”類，以紅色顯示該行。 我也有幾個錨點，它們跳轉到特定的行，並且我希望該動作在該行中具有一個臨時的突出顯示，以便用戶知道他們要跳轉到哪一行。

如果跳到的行沒有添加“危險”類，則突出顯示效果很好，但是如果該行具有危險類，則突出顯示不會發生。

這是桌子（有點凝結）

<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行，但是由於該行具有“危險”類（這使該行具有紅色背景），因此看不到突出顯示的內容。

如果使用瀏覽器檢查器，則無論哪種情況，當我單擊效果時都可以看到，但是引導程序“ danger”類阻止了它的工作。

我如何使它工作？

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

Answer 1

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

Answer 2

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