토글 버튼을 클릭 할 때 배경색을 변경하는 방법은 무엇입니까?

Question

도움이 필요합니다 :

토글 버튼을 클릭 할 때 문제가 생겼습니다. 배경색을 변경하고 다시 클릭하면 원래의 배경색으로 되돌아 가야합니다. 귀하의 도움을 높이 평가 될 것입니다.

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

Answer 1

당신은 당신의 버튼에 클릭 이벤트 리스너가 필요합니다. 버튼을 클릭 할 때마다 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; 
} 

자바 스크립트 :

$(document).ready(function() { 

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

예 :,210

Answer 2

여기

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