jQuery 突出显示在 bootstrap v4 按钮上不起作用答案

【问题标题】：jQuery highlighting not working on a bootstrap v4 buttonjQuery 突出显示在 bootstrap v4 按钮上不起作用
【发布时间】：2018-06-17 17:19:13
【问题描述】：

我试图在单击另一个按钮时突出显示按钮的文本。

我的 html 的过度简化版本如下所示：

$(".abth").click(function(e) {
  var btnid = '#'.concat($(this).text());
  var divPosition = $(btnid).offset();
  console.log(btnid);
  $('html, body').animate({scrollTop: divPosition.top}, "slow"); //this is working
  $(btnid).effect("highlight", {color: "#FFFFFF"}, 5000);
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" />


<li class="page-item abth"><a class="page-link" href="#">A</a></li>
<button type="button" id="A" class="btn btn-secondary alphabutton">A</button>

问题是 jquery 突出显示将在常规按钮上起作用，但在这种情况下它不起作用，因为我的按钮是引导按钮。任何线索如何使引导按钮上的突出显示工作？

附：我的引导程序版本是 4.0。显然我的代码适用于早期版本的 Bootstrap。

【问题讨论】：

哪一部分不工作？它在这里工作jsfiddle.net/andrewgi/7pzf8u8g
究竟是什么“不起作用”我将您的代码粘贴到小提琴中，它完全符合我的想法。
@andrewgi 嗯，我可以在小提琴中查看它，当我尝试创建一个 sn-p 时，我还必须链接 css 文件。
@andrewgi 正如我在问题中所说的那样，突出显示功能不起作用。仍然不是。我看了你的小提琴。看起来不错，但在我的情况下仍然无法正常工作。
如果提供的代码有效并且我们无法重现问题，我们将无法帮助您

标签： javascript jquery html twitter-bootstrap jquery-ui

【解决方案1】：

我注意到.btn 类有一个由引导程序设置的转换，所以在一次完全随机的调试尝试中，我尝试设置transition: none，认为转换可能干扰了 jQueryUI 计算，并且一切正常。您可能不想一直禁用引导转换，但您可以在高亮效果之前添加一个类（设置transition: none;），然后在.effect() 完成后删除该类。代码如下所示：

var $transition = null;
$(".abth").click(function(e){
  var btnid='#'.concat($(this).text());
  console.log(btnid);
  var $btn = $(btnid);
  var divPosition = $btn.offset();
  $('html, body').animate({scrollTop: divPosition.top}, "slow");//this is working
  if ($transition !== null) {
    // if button is pressed before previous animation is completed, stop the animation 
    // immediately before starting another one to prevent issues
    $transition.stop(false, true);
  }
  $btn.addClass("no-transition");
  $transition = $btn.effect( "highlight", {color:"#FFFFFF"}, 5000, function () {
    $btn.removeClass("no-transition");
    $transition = null;
  });
});

.no-transition {
  transition: none !important;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" />


<li class="page-item abth"><a class="page-link" href="#">A</a></li>
<button type="button" id="A" class="btn btn-secondary alphabutton">A</button>

【讨论】：