当切换按钮点击时如何改变背景颜色?

I need help :

我需要帮助:

i've got a problem when clicking any toggle button i want it to change background-color and when clicked again it must return to original background-color . your help will be highly appreciated.

我有一个问题，当点击任何切换按钮时，我希望它改变背景颜色，当再次点击时，它必须返回原始的背景色。非常感谢您的帮助。

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);
}

2 个解决方案

#1

You'll need a click event listener on your button. Whenever the button is clicked, the toggleClass() will switch between the class normal and active, each containing a different background color.

您需要在按钮上单击事件监听器。当单击按钮时，toggleClass()将在类正常和活动之间切换，每个都包含不同的背景颜色。

Based on your comments, it appears you're creating these buttons dynamically from values in a database, so you won't know the id of the button beforehand. For this situation, instead of creating a click event listener for a specific button (referencing the id), create the event for all buttons on your page $('input[type=button]').click(function () {....

根据您的评论，看起来您正在从数据库中的值动态创建这些按钮，因此您不会预先知道该按钮的id。对于这种情况，不要为特定的按钮创建一个单击事件监听器(引用id)，为页面$('input[type=button]')创建所有按钮的事件。点击(函数(){ ....

HTML:

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

CSS

.normal {
    background-color: green;
}

.active {
   background-color: red;
}

Javascript:

Javascript:

$(document).ready(function () {

    // If any button is clicked, toggle its assigned class (changes the color)
    $('input[type=button]').click(function () {
        $('#target').toggleClass('active');
    });
});

Example: http://jsfiddle.net/EkAAh/

例如:http://jsfiddle.net/EkAAh/

#2

Try your code like

试试你的代码

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);
}

#1