Question

我正在尝试添加活动类，例如悬停颜色更改，onclick具有活动颜色，并在我向前移动以点击不同按钮时保持按钮上的颜色。我想在调用remove类时删除所有这些活动颜色。如何将这些活动类添加到动态创建的按钮？这是添加eventlisteners后按钮的显示方式。

＆＃13;

$(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> -->
                      */

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 1

您的代码和说明不符！我从你的问题中解释了我的理解：

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 - 在调用删除类时删除所有这些活动颜色。

您必须遍历所有按钮并重置样式。

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

您的最终代码将是这样的：

＆＃13;

$(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');
  });
})

＆＃13;

<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>

＆＃13;

向动态生成的按钮添加和删除活动类事件侦听器

1 个答案: