我需要帮助:
我在点击任何切换按钮时遇到问题我希望它改变背景颜色,再次点击时它必须返回原始背景颜色。 我们将非常感谢您的帮助。
function createButtons(tbID, tbClass, tbType, tbValue, onClick) {
return '\n<input '
+ (tbID ? ' id=\'' + tbID + '\'' : '')
+ (tbClass ? ' class=\'' + tbClass + '\'' : '')
+ (tbType ? ' type=\'' + tbType + '\'' : '')
+ (tbValue ? ' value=\'' + tbValue + '\'' : '')
+ (onClick ? ' onclick=\'' + onClick + '\'' : '')
+ '>';
}
function DisplayButtons(cableData) {
var newContent = '';
$.each(cableData,
function (i, item) {
function toggle() {
$(this).clicked ? $("#tb").addClass("btnColor") : $(this).removeClass("btnColor");
$("#tb").toggleClass("btnColorR");
}
newContent += createButtons("tb" + item.CommonCable, null, "submit", item.CommonCable,
' alert("clicked")');
});
$("#Categories").html(newContent);
}
答案 0 :(得分:2)
您的按钮上需要点击事件监听器。只要单击该按钮,toggleClass()将在类普通和活动之间切换,每个类包含不同的背景颜色。
根据您的评论,您似乎是从数据库中的值动态创建这些按钮,因此您不会事先知道按钮的ID。对于这种情况,不是为特定按钮创建点击事件监听器(引用ID),而是为页面上的所有按钮创建事件$('input[type=button]').click(function () {...
。
<强> HTML:强>
<!--
These buttons were generated dynamically from values stored in a database
I won't know their ids
-->
<input type="button" name="btn_1_from_db" value="Toggle Color1" />
<input type="button" name="btn_2_from_db" value="Toggle Color2" />
<input type="button" name="btn_3_from_db" value="Toggle Color3" />
<input type="button" name="btn_4_from_db" value="Toggle Color4" />
<div id="target" class="normal">
My color will change
</div>
<强> CSS 强>
.normal {
background-color: green;
}
.active {
background-color: red;
}
<强>使用Javascript:强>
$(document).ready(function () {
// If any button is clicked, toggle its assigned class (changes the color)
$('input[type=button]').click(function () {
$('#target').toggleClass('active');
});
});
答案 1 :(得分:0)
尝试使用
之类的代码function createButtons(tbID, tbClass, tbType, tbValue, onClick) {
return '\n<input '
+ (tbID ? ' id=\'' + tbID + '\'' : '')
+ (tbClass ? ' class=\'' + tbClass + '\'' : '')
+ (tbType ? ' type=\'' + tbType + '\'' : '')
+ (tbValue ? ' value=\'' + tbValue + '\'' : '')
+ (onClick ? ' onclick=\'toggle(this);' + onClick + '\'' : '')
+ '>';
}
function toggle(ths) {
$(ths).toggleClass("btnColor");
$("#tb").toggleClass("btnColorR");
}
function DisplayButtons(cableData) {
var newContent = '';
$.each(cableData,
function (i, item) {
newContent += createButtons("tb" + item.CommonCable, null, "submit", item.CommonCable,
' alert("clicked")');
});
$("#Categories").html(newContent);
}