Добавить и удалить активный прослушиватель событий класса для динамически генерируемых кнопок - PullRequest
Новая
       5

Добавить и удалить активный прослушиватель событий класса для динамически генерируемых кнопок

0 голосов
/ 07 мая 2018

Я пытаюсь добавить активные классы, такие как при смене цвета при наведении мыши, у кнопки onclick есть активный цвет, и этот цвет остается на кнопке, когда я двигаюсь вперед, нажимая разные кнопки.Я хочу удалить все эти активные цвета при вызове класса удаления.Как я могу добавить эти активные классы к динамически создаваемым кнопкам?enter image description here так выглядят кнопки после добавления списков событий.

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

1 Ответ

0 голосов
/ 07 мая 2018

Ваш код и ваше описание не совпадают! Я объясняю, что я понимаю из вашего вопроса:

Изменение цвета при наведении на 1 Вы должны определить некоторые события на кнопках, как показано ниже. измените их своими 

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

2-щелчок имеет активный цвет и остается тем же цветом на кнопке, когда я двигаюсь вперед, нажимая различные кнопки.

Вам нужно определить событие onclick с JQuery для каждой кнопки при их создании. как 

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

Ваш окончательный код будет выглядеть примерно так: 

$(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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...