jQuery在Bootstrap Button Group中的按钮之间切换类；设置一个而未设置另一个则取消设置另一个

时间：2018-09-13 15:25:14

标签： javascript jquery css twitter-bootstrap-3

我有两个按钮的Bootstrap按钮组（True / False）按钮，并且想要在单击另一个时取消设置/取消单击-单击True时，True在类中处于活动状态； False将变为未单击状态并设置为另一个类。

这是我正在测试的HTML页面：

<html>
    <head>
        <title>Button Test</title>
        <link href="public/css/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <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.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
        <script src="public/js/bootstrap/bootstrap.js" type="text/javascript"></script> 
        <style>
            .squareUpButton {
                border-radius:0px;
            }
            .resolveButtonOff {
                background-color: #FFFFFF;
                border: 1px solid #00953a;
                color: #00953a !important;
                font-size: 8pt;
                padding: 7px;
            }
            .resolveButtonOn {
                background-color: #00953a;
                border: 1px solid #00953a;
                color: #FFFFFF !important;
                font-size: 8pt;
                padding: 7px;
            }
            .trueFalseButtonOff {
                background-color: #FFFFFF;
                border: 1px solid #005980;
                color: #005980 !important;
                font-size: 8pt;
                padding: 7px;
            }
            .trueFalseButtonOn {
                background-color: #005980;
                border: 1px solid #005980;
                color: #FFFFFF !important;
                font-size: 8pt;
                padding: 7px;
            }
            .remedyButtonR:not (:last-child) {
                border-right: none;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-sm-2">
                    <div class="btn-group" style="width:100%">
                        <button id="house_Rules_True_Button" type="button" class="btn squareUpButton trueFalseButtonOff" style="width:50%;">TRUE</button>
                        <button id="house_Rules_False_Button" type="button" class="btn squareUpButton trueFalseButtonOff" style="width:50%;">FALSE</button>
                    </div>
                    <div class="btn-group" style="width:100%">
                        <button id="house_Rules_Resolved_Button" type="button" class="btn squareUpButton resolveButtonOff" style="width:99.5%;">RESOLVED</button>
                    </div>
                    <input name="house_Rules">
                </div>
            </div>
        </div>
    </body>
    <script>
        $("button[id$='_Resolved_Button'").on('click', function () {
            // Get the field value...
            var fieldName = $(this).prop("id");
            console.log("button_Resolved_Button - fieldName = " + fieldName);
            var fieldIndex = fieldName.indexOf("_Resolved");
            console.log("button_Resolved_Button - fieldIndex = " + fieldIndex);
            fieldName = fieldName.substring(0, fieldIndex);
            console.log("button_Resolved_Button - fieldName = " + fieldName);
            var fieldID = "input[name='" + fieldName + "']";
            console.log("button_Resolved_Button - fieldID = " + fieldID);
            var currentValue = $(fieldID).val();
            console.log("button_Resolved_Button - currentValue = " + currentValue);

            if(currentValue == "resolved") {
                // Set to nothing...
                $(fieldID).val("");
            } else {
                // Set the field...
                $(fieldID).val("resolved");
            }

            $(this).toggleClass("resolveButtonOff resolveButtonOn");
        });

        $("button[id$='_True_Button'").on('click', function () {
            // Get the field value...
            var fieldName = $(this).prop("id");         
            var fieldIndex = fieldName.indexOf("_True");
            fieldName = fieldName.substring(0, fieldIndex);
            console.log("button_True_Button - fieldName = " + fieldName);
            var fieldID = "input[name='" + fieldName + "']";
            console.log("button_True_Button - fieldID = " + fieldID);
            var currentValue = $(fieldID).val();
            console.log("button_True_Button - currentValue = " + currentValue);

            // Need to check the value...
            if(currentValue == "" || currentValue == null) {
                // Just toggle...
                $(this).toggleClass("trueFalseButtonOff trueFalseButtonOn");
                // Set the field...
                $(fieldID).val("true");
            }
            if(currentValue == "true") {
                // Just toggle...
                $(this).toggleClass("trueFalseButtonOff trueFalseButtonOn");
                // Set to nothing...
                $(fieldID).val("");
            }
            if(currentValue == "false") {
                // Unclick/unset the False button...
                var buttonID = $(this).prop("id");
                var otherButtonID = buttonID.replace("True", "False");
                console.log("button_True_Button - otherButtonID = " + otherButtonID);
                $(otherButtonID).removeClass("trueFalseButtonOn");
                $(otherButtonID).addClass("trueFalseButtonOff");
                //$(buttonID).click();
                // Set the field...
                $(fieldID).val("true");
                // Toggle the class...
                $(this).toggleClass("trueFalseButtonOff trueFalseButtonOn");
            }
            if(currentValue == "resolved") {
                // Do nothing?
            }
        });

        $("button[id$='_False_Button'").on('click', function () {
            // Get the field value...
            var fieldName = $(this).prop("id");
            var fieldIndex = fieldName.indexOf("_False");
            fieldName = fieldName.substring(0, fieldIndex);
            console.log("button_True_Button - fieldName = " + fieldName);
            var fieldID = "input[name='" + fieldName + "']";
            console.log("button_False_Button - fieldID = " + fieldID);
            var currentValue = $(fieldID).val();
            console.log("button_False_Button - currentValue = " + currentValue);

            // Need to check the value...
            if(currentValue == "" || currentValue == null) {
                // Just toggle...
                $(this).toggleClass("trueFalseButtonOff trueFalseButtonOn");
                // Set the field...
                $(fieldID).val("false");
            }
            if(currentValue == "true") {
                // Unclick/unset the False button...
                var buttonID = $(this).prop("id");
                buttonID = buttonID.replace("True", "False");
                var otherButtonID = buttonID.replace("False", "True");
                console.log("button_True_Button - otherButtonID = " + otherButtonID);
                $(otherButtonID).removeClass("trueFalseButtonOn");
                $(otherButtonID).addClass("trueFalseButtonOff");
                // Set the field...
                $(fieldID).val("false");
                // Toggle the class...
                $(this).toggleClass("trueFalseButtonOff trueFalseButtonOn");
            }
            if(currentValue == "false") {
                // Just toggle...
                $(this).toggleClass("trueFalseButtonOff trueFalseButtonOn");
                // Set to nothing...
                $(fieldID).val("");
            }
            if(currentValue == "resolved") {
                // Do nothing?
            }
        });     
    </script>
</html>

我创建了一个JSFiddle：

https://jsfiddle.net/dzeller44/k27r39xL/

我找到了一些帖子，但是它们并没有帮助我解决问题：

Javascript / JQuery Toggle Active Class between 2 buttons on a button group

Toggling class in group of buttons

任何帮助都会很棒。

2 个答案:

答案 0 :(得分：1)

您正在执行不必要的代码。只需添加

$(".trueFalseButtonOn").removeClass("trueFalseButtonOn");
$(this).addClass("trueFalseButtonOn");

对应于您的正确和错误按钮单击事件。

在以下代码段中，我添加了新代码并注释了您的代码。

$("button[id$='_Resolved_Button'").on('click', function () {
			// Get the field value...
			var fieldName = $(this).prop("id");
			console.log("button_Resolved_Button - fieldName = " + fieldName);
			var fieldIndex = fieldName.indexOf("_Resolved");
			console.log("button_Resolved_Button - fieldIndex = " + fieldIndex);
			fieldName = fieldName.substring(0, fieldIndex);
			console.log("button_Resolved_Button - fieldName = " + fieldName);
			var fieldID = "input[name='" + fieldName + "']";
			console.log("button_Resolved_Button - fieldID = " + fieldID);
			var currentValue = $(fieldID).val();
			console.log("button_Resolved_Button - currentValue = " + currentValue);

			if(currentValue == "resolved") {
				// Set to nothing...
				$(fieldID).val("");
			} else {
				// Set the field...
				$(fieldID).val("resolved");
			}
			
			$(this).toggleClass("resolveButtonOff resolveButtonOn");
		});
	
		$("button[id$='_True_Button'").on('click', function () {
			// Get the field value...
			var fieldName = $(this).prop("id");			
			var fieldIndex = fieldName.indexOf("_True");
			fieldName = fieldName.substring(0, fieldIndex);
			console.log("button_True_Button - fieldName = " + fieldName);
			var fieldID = "input[name='" + fieldName + "']";
			console.log("button_True_Button - fieldID = " + fieldID);
			var currentValue = $(fieldID).val();
			console.log("button_True_Button - currentValue = " + currentValue);
			
      $(".trueFalseButtonOn").removeClass("trueFalseButtonOn");
      $(this).addClass("trueFalseButtonOn");
				$(fieldID).val("true");
			// Need to check the value...
			/*if(currentValue == "" || currentValue == null) {
				// Just toggle...
				$(this).toggleClass("trueFalseButtonOff trueFalseButtonOn");
				// Set the field...
				$(fieldID).val("true");
			}
      
			if(currentValue == "true") {
				// Just toggle...
				$(this).toggleClass("trueFalseButtonOff trueFalseButtonOn");
				// Set to nothing...
				$(fieldID).val("");
			}
			if(currentValue == "false") {
				// Unclick/unset the False button...
				var buttonID = $(this).prop("id");
				var otherButtonID = buttonID.replace("True", "False");
				console.log("button_True_Button - otherButtonID = " + otherButtonID);
				$(otherButtonID).removeClass("trueFalseButtonOn");
				$(otherButtonID).addClass("trueFalseButtonOff");
				//$(buttonID).click();
				// Set the field...
				$(fieldID).val("true");
				// Toggle the class...
				$(this).toggleClass("trueFalseButtonOff trueFalseButtonOn");
			}
			if(currentValue == "resolved") {
				// Do nothing?
			}*/
		});
	
		$("button[id$='_False_Button'").on('click', function () {
			// Get the field value...
			var fieldName = $(this).prop("id");
			var fieldIndex = fieldName.indexOf("_False");
			fieldName = fieldName.substring(0, fieldIndex);
			console.log("button_True_Button - fieldName = " + fieldName);
			var fieldID = "input[name='" + fieldName + "']";
			console.log("button_False_Button - fieldID = " + fieldID);
			var currentValue = $(fieldID).val();
			console.log("button_False_Button - currentValue = " + currentValue);
			
      $(".trueFalseButtonOn").removeClass("trueFalseButtonOn");
      $(this).addClass("trueFalseButtonOn");
				$(fieldID).val("false");
			// Need to check the value...
			/*if(currentValue == "" || currentValue == null) {
				// Just toggle...
				$(this).toggleClass("trueFalseButtonOff trueFalseButtonOn");
				// Set the field...
				$(fieldID).val("false");
			}
			if(currentValue == "true") {
				// Unclick/unset the False button...
				var buttonID = $(this).prop("id");
				buttonID = buttonID.replace("True", "False");
				var otherButtonID = buttonID.replace("False", "True");
				console.log("button_True_Button - otherButtonID = " + otherButtonID);
				$(otherButtonID).removeClass("trueFalseButtonOn");
				$(otherButtonID).addClass("trueFalseButtonOff");
				// Set the field...
				$(fieldID).val("false");
				// Toggle the class...
				$(this).toggleClass("trueFalseButtonOff trueFalseButtonOn");
			}
			if(currentValue == "false") {
				// Just toggle...
				$(this).toggleClass("trueFalseButtonOff trueFalseButtonOn");
				// Set to nothing...
				$(fieldID).val("");
			}
			if(currentValue == "resolved") {
				// Do nothing?
			}*/
		});
.squareUpButton {
				border-radius:0px;
			}
			.resolveButtonOff {
				background-color: #FFFFFF;
				border: 1px solid #00953a;
				color: #00953a !important;
				font-size: 8pt;
				padding: 7px;
			}
			.resolveButtonOn {
				background-color: #00953a;
				border: 1px solid #00953a;
				color: #FFFFFF !important;
				font-size: 8pt;
				padding: 7px;
			}
			.trueFalseButtonOff {
				background-color: #FFFFFF;
				border: 1px solid #005980;
				color: #005980 !important;
				font-size: 8pt;
				padding: 7px;
			}
			.trueFalseButtonOn {
				background-color: #005980;
				border: 1px solid #005980;
				color: #FFFFFF !important;
				font-size: 8pt;
				padding: 7px;
			}
			.remedyButtonR:not (:last-child) {
				border-right: none;
			}
<html>
	<head>
		<title>Button Test</title>
		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
		<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.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
		<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-sm-2">
					<div class="btn-group" style="width:100%">
						<button id="house_Rules_True_Button" type="button" class="btn squareUpButton trueFalseButtonOff" style="width:50%;">TRUE</button>
						<button id="house_Rules_False_Button" type="button" class="btn squareUpButton trueFalseButtonOff" style="width:50%;">FALSE</button>
					</div>
					<div class="btn-group" style="width:100%">
						<button id="house_Rules_Resolved_Button" type="button" class="btn squareUpButton resolveButtonOff" style="width:99.5%;">RESOLVED</button>
					</div>
					<input name="house_Rules">
				</div>
			</div>
		</div>
	</body>
</html>

您也可以在小提琴上对其进行测试。 https://jsfiddle.net/nimittshah/k27r39xL/7/

快乐编码：）

答案 1 :(得分：0)

您要切换最初不存在的2个类，因此当您单击一个按钮时，它将在两个按钮上都应用切换。我用以下方法替换了您的切换方法：

$("#toggleHolder button").removeClass("trueFalseButtonOn trueFalseButtonOff");
  $(this).addClass("trueFalseButtonOn");
  currentValue = $(this).text();
  $(this).siblings("button").addClass("trueFalseButtonOff");

JSFiddle

我还为持有按钮的外部div添加了ID“ toggleHolder”，以便我们可以更轻松地调用按钮。该代码从两个按钮中删除了类'trueFalseButtonOn'和'trueFalseButtonOff'。然后将ON类添加到单击的按钮中，将OFF类添加到单击的按钮siblings

相关问题
最新问题