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

Posted 2023-05-08

【中文标题】jQuery 突出显示在 bootstrap v4 按钮上不起作用

【英文标题】：jQuery highlighting not working on a bootstrap v4 button

【发布时间】：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 正如我在问题中所说的那样，突出显示功能不起作用。仍然不是。我看了你的小提琴。看起来不错，但在我的情况下仍然无法正常工作。

如果提供的代码有效并且我们无法重现问题，我们将无法帮助您

【参考方案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>