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>

问题是切换按钮功能在第一次单击后不执行，但是在第二次单击时却按应有的方式工作。有人可以解释一下为什么吗？基本上，我想将这两个按钮“ Comp”设置为活动，然后通过单击Toggle再次将其禁用。

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/

Answer 2

有一些问题，

1）第一次单击时未定义属性aria-pressed，因此您必须对其进行检测。

2）添加/删除类的“好”方法是使用addClass()或removeClass()。您甚至可以使用toggleClass()。

$("#toggle").click(function()
{
    if (!$(this).attr("aria-pressed") || $(this).attr("aria-pressed") == "true")
    {
        $("button[data-toggle='button']").attr("aria-pressed","true");
        $("button[data-toggle='button']").addClass("focus active");
    }
    else
    {
        $("button[data-toggle='button']").attr("aria-pressed","false");
        $("button[data-toggle='button']").removeClass("focus active");
    }
});

<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" 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>

Answer 3

您将要使用.on事件处理程序而不是.click-这是一个好习惯，因为它可以处理动态添加的元素。

在下面的示例中，它侦听主体级别的DOM更改事件。

文档： http://api.jquery.com/on/

$("body").on("click","#toggle",function(){  
// your code here
});

要考虑的另一件事是，由于您将第一次单击时的按钮设置为“ false”，因此以后再单击时都不会陷入“ true”的情况。

小提琴： https://jsfiddle.net/zdvonpr2/

jQuery-boostrap按钮上的功能在第一次单击时不执行

3 个答案: