向動態生成的按鈕添加和刪除活動類事件偵聽器

Question

我正在嘗試添加活動類，例如懸停顏色更改，onclick具有活動顏色，並在我繼續單擊其他按鈕時將該顏色保留在按鈕上。 我想在調用remove類時刪除所有這些活動顏色。 如何將這些活動類添加到動態創建的按鈕？ 這是添加事件偵聽器后按鈕的顯示方式。

 $(document).on('click', '.btn btn-default', function() { alert(this.innerHTML); }); var numOfSets = 1; var numOfButtons = 10; for (var j = 0; j < numOfSets; j++) { // create the set var setElement = "<div style='border: solid 1px red;display:table;width:80%;' id='set" + j + "'>"; // create its content var i = 0; for (; i < numOfButtons; i++) { var setContent = "<div id='myDIV' class='btn btn-default' style='border:none;background-color: #ccc;border-radius:0;display:table-cell;'></div>"; // Active classes are added here var header = document.getElementById("myDIV"); var btns = header.getElementsByClassName("btn btn-default"); for (var i = 0; i < numOfButtons.length; i++) { btns[i].addEventListener("click", function() { var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace(" active", ""); this.className += " active"; }); } setElement += setContent; } //close set div setElement += "</div>"; // append to dom $("#areaForSets").append(setElement + "<br/>"); } /* <!--<script> $('.btn.btn-default').on("click",function(){ $(this).addClass('color'); }); $('#Button1').on('click',function() { // alert('click'); $('input:radio[name=options]').each(function () { $(this).prop('checked', false); $(this).removeClass('color'); $(this).parent().removeClass('color'); $(this).parent().removeClass('active'); }); }); </script> --> */

 .btn-default { color: #D8D8D8; background-color: #D8D8D8; border-color: #D8D8D8; } .btn-default:hover { background-color: #5F5A66; } .btn-default.active { background-color: #4A90E2; color: #4A90E2; background-color: #4A90E2; } .btn-default.color { background-color: #4A90E2; } .btn-default.focus { background-color: #1E3B5D !important; } input[type=radio] { margin-top: -6px; }

 <!DOCTYPE html> <html> <head> <title></title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <button class="btn btn-default">Go</button> <br/> <div id="areaForSets"> </div> <div id="myDIV"> </div> </body>

Answer 1

您的代碼和描述不匹配！ 我解釋一下我對您的問題的理解：

一對一懸停顏色更改您需要在按鈕上定義一些事件，如下所示。 用自己的修改這些

btn.on('mouseenter', function() {
  $(this).css('border', '2px solid #5F5A66');
});
btn.on('mouseout', function() {
  $(this).css('border', '1px solid #5F9A99');
});

2-onclick具有活動顏色，當我繼續單擊其他按鈕時，該顏色將保留在按鈕上。

創建按鈕時，需要使用JQuery為每個按鈕定義onclick事件。 喜歡

btn.on('click', function() { 
  $(this).addClass('btn-primary');
});

3-在調用remove類時刪除所有這些活動顏色。

您必須循環瀏覽所有按鈕並重置樣式。

$("#reset").on('click', function(){
  $('#areaForSets button').each(function(itm) {
    $(this).css({'border': '1px solid #5F9A99'}).removeClass('btn-primary');
  });
})

您的最終代碼將如下所示：

 $(document).on('click', '.btn btn-default', function() { alert(this.innerHTML); }); var numOfSets = 1; var numOfButtons = 10; for (var j = 0; j < numOfSets; j++) { // create its content for (var i = 0; i < numOfButtons; i++) { var setContent = "<button id='myDIV" + i + "' class='btn btn-default'>Test</button>"; $("#areaForSets").append(setContent); // Active classes are added here var btn = $("#myDIV" + i); btn.addClass("active"); btn.css('width', `${100/numOfButtons}%`); btn.on('click', function() { $(this).addClass('btn-primary'); }); btn.on('mouseenter', function() { $(this).css('border', '2px solid #5F5A66'); }); btn.on('mouseout', function() { $(this).css('border', '1px solid #5F9A99'); }); } } $("#reset").on('click', function() { $('#areaForSets button').each(function(itm) { $(this).css({ 'border': '1px solid #5F9A99' }).removeClass('btn-primary'); }); })

 <html> <head> <title></title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <br/> <div id="areaForSets"> </div> <button id="reset">Reset All</button> </body> </html>

向動態生成的按鈕添加和刪除活動類事件偵聽器

問題描述

1 個解決方案

解決方案1
1 已采納 2018-05-07 06:00:38

向動態生成的按鈕添加和刪除活動類事件偵聽器

問題描述

1 個解決方案

解決方案1 1 已采納 2018-05-07 06:00:38

解決方案1
1 已采納 2018-05-07 06:00:38