Question

当我点击一个div时，我希望div之前和之后也改变颜色。代码现在可以正常工作，但只会更改单击的div的颜色。我是使用jQuery的新手，所以我很感激我能得到的任何帮助。有人可以帮忙吗？

function generateDivs(amount) {
  container.empty();
  for (var i = 0; i < amount; i++) {
    var div = $('<div>');
    div.addClass('box');
    container.append(div);
  }
}

var container = $('#boxes');

$("#addSquareBtn").click(function() {
  var nmbrSquare = $("#nmbrSquare").val();
  generateDivs(nmbrSquare)
});

generateDivs(1);

$(function() {  
    $('#boxes').click(function(event){
    $(event.target).css('background-color', 'plum');

    });
});

Answer 1

使用prev()和next()，如下所示： -

$(function() {  
   $('#boxes').click(function(event){
      $(event.target).css('background-color', 'plum');
      $(this).prev().css('background-color', 'plum');
      $(this).next().css('background-color', 'plum');
   });
});

您也可以使用Event Delegation： -

$(function() {  
  $(document).on('click','#boxes',function(){
     $(this).css('background-color', 'plum');
     $(this).prev().css('background-color', 'plum');
     $(this).next().css('background-color', 'plum');
  });
});

点击一个div - 改变三个颜色？

1 个答案: