Javascript jquery-boostrap按钮上的函数在第一次单击时不执行

我有个问题

我有这个jquery函数

$（“#切换”）。单击（函数（）{
if（$（“#切换”）.attr（“按了aria”）=“true”）{
$（“button[data toggle='button']）attr（“aria已按下”，“true”）；
$（“按钮[data toggle='button']”）attr（“类”，“btn btn轮廓暗焦点激活”）；
}否则{
$（“button[data toggle='button']”）attr（“aria pressed”，“false”）；
$（“button[data toggle='button']）attr（“class”，“btn-btn-outline-dark”）；
}
});

切换
公司
Comp
只需将属性添加到html的切换按钮中，如下所示

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

切换

这是一个正在工作的jsfiddle
有几个问题

1）第一次单击时未定义属性
aria pressed
，因此您必须检测它

2）添加/删除类的“好”方法是使用
addClass（）
或
removeClass（）
。此外，您还可以使用
toggleClass（）


$（“#切换”）。单击（函数（）
{
if（！$（此）.attr（“按了aria”）| |$（此）.attr（“按了aria”）=“true”）
{
$（“button[data toggle='button']）attr（“aria已按下”，“true”）；
$（“按钮[data toggle='button']）；
}
其他的
{
$（“button[data toggle='button']”）attr（“aria pressed”，“false”）；
$（“按钮[data toggle='button']）；
}
});

切换
公司
Comp
您将希望使用.on事件处理程序而不是.click-这是一种很好的做法，因为它可以处理动态添加的元素

在我下面的示例中，这将侦听主体级别上的DOM更改事件

文件：

另一个要考虑的是，由于您在第一次单击时将按钮设置为“false”，在后续点击时，您将永远不会进入“true”情况。
小提琴：
您的切换按钮在加载时没有“aria pressed”属性，因此第一次单击失败准备添加它，但它仍然不起作用如果您希望切换按钮，则在第一次单击时，它需要是
aria pressed=“true”
而不是
aria pressed=“false”
它也应该是aria pressed=“true”而不是：在jquery中使用===
$("body").on("click","#toggle",function(){  
// your code here
});