javascript - jquery - 引导按钮上的功能在第一次点击时不执行

Question

我有一个问题

我有这个 jquery 函数

$("#toggle").click(function(){	
		
		if($("#toggle").attr("aria-pressed") == "true"){
				$("button[data-toggle='button']").attr("aria-pressed","true");
				$("button[data-toggle='button']").attr("class","btn btn-outline-dark focus active");
		}else{
			$("button[data-toggle='button']").attr("aria-pressed","false");
			$("button[data-toggle='button']").attr("class","btn btn-outline-dark");

		}
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<button type="button" class="btn btn-outline-dark" aria-pressed="false" data-toggle="button" id="toggle">Toggle</button>

<button type="button" class="btn btn-outline-dark" data-toggle="button" aria-pressed="false" autocomplete="off" >Comp</button>
		<button type="button" class="btn btn-outline-dark" data-toggle="button" aria-pressed="false" autocomplete="off" >Comp</button>

问题是切换按钮功能在第一次点击后不执行，但在第二次点击时它会正常工作。有人可以向我解释为什么吗？基本上我想通过点击 Toggle 将这 2 个按钮“Comp”设置为事件和再次停用。

Answer 1

只需将属性添加到您的 html 中即可像这样切换按钮

<button type="button" class="btn btn-outline-dark" data-toggle="button" id="toggle" aria-pressed="true">Toggle</button>

这是一个有效的 jsfiddle https://jsfiddle.net/vdadekvL/26/