如何在點擊切換按鈕時更改背景顏色？

我點擊任何切換按鈕時遇到了問題，我希望它更改背景顏色，再次單擊時它必須返回原始背景顏色。您的幫助將不勝感激。

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

來源

2013-02-08 C_Major

這是一個答案，這是很非標準jQuery的API。 http://stackoverflow.com/a/3337649/1347177 – Felix

看到您對@tuan answer的評論。你的問題不清楚。編輯它。你想要什麼**完全**？你正在創建'submit'按鈕。爲什麼？他們正在提交什麼？我想不是，因爲你想在點擊時改變顏色。請更清楚你是否需要幫助。 – ByScripts

您需要在按鈕上單擊事件偵聽器。無論何時單擊該按鈕，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'); 
    }); 
});

示例：http://jsfiddle.net/EkAAh/

來源

2013-02-08 07:49:39 Tuan

和羅漢我很抱歉，我ddnt提到我的切換按鈕創建onLoad從數據庫。我的主要問題，我不知道如何獲得每個和每個按鈕創建的ID.so，我可以使用該ID屬性爲我的CCS頁面切換按鈕我創建 –

@ByScripts我有一個JavaScript頁面，創建切換按鈕，當頁面加載，但我現在不能單獨使用這些按鈕，因爲按鈕的ID是我數據庫表上的列名。所以我不能預先知道它，這就是爲什麼我不能在每個按鈕上分配一個方法或函數的原因。請檢查我上傳的代碼以獲取更多詳細信息。 –

我更新了我的答案以解決您的意見。正如@ByScripts建議的那樣，您應該真正更新原始問題以包含您在評論中寫下的內容。你原來的問題不是很清楚，可以改進。這將有助於其他人提出類似的問題，更容易找到答案。更不用說，它也會幫助別人更好地回答你的問題。 – Tuan

試試你的代碼像

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

來源

2013-02-08 07:51:38

非常感謝你的男人，它完美的作品，你是一個明星 –

歡迎... @C_Major –

如何在點擊切換按鈕時更改背景顏色？

回答

相關問題