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行，但由于该行具有“危险”类（这使得该行具有红色背景），因此我看不到突出显示。

如果我使用浏览器检查器，我可以看到，在任何一种情况下，当我点击效果仍然发生时，但引导程序“危险”类阻止它工作。

如何让它发挥作用？

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

jQuery高亮效果不适用于Bootstrap的行类

2 个答案: