Question

我试图在单击元素时设置活动颜色，然后如果单击另一个元素，它将从上一个和下一个中删除颜色，以便在新单击的元素上设置颜色。下面的代码能够在单击div元素时设置颜色，但是当单击另一个元素时，我不会删除上一个和下一个元素的颜色。

请我帮忙

$('.listers').click(function(event) {
  var evt = $(this);
  var kids = $(event.target).children();
  var len = kids.css('color', 'green');
  var e_type = $(evt).attr('data-event-attribute');
  $('#collection-type').val(e_type);
  $('.listers .listlogo > .fa').children().prevAll().css('color', '#F4BD00');
  $('.listers .listlogo > .fa', this).len;
  $('.listers .listlogo > .fa').children().nextAll().css('color', '#F4BD00');

  event.preventDefault();
});

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="listers" data-event-attribute="1">
  <span class="listlogo"><i class="fa fa-lock"></i></span>Data 1
</div>

<div class="listers" data-event-attribute="1">
  <span class="listlogo"><i class="fa fa-lock"></i></span> Data 2
</div>

<div class="listers" data-event-attribute="1">
  <span class="listlogo"><i class="fa fa-lock"></i></span> Data 3
</div>

Answer 1

我使用addClass/removeClass提出了另一个解决方案，您可以使用活动

类管理css

$('.listers').click(function(event) {
  var evt = $(this);
  var e_type = $(evt).attr('data-event-attribute');
  $('#collection-type').val(e_type);
  $('.listers').removeClass("active");
  $(this).addClass("active");

  event.preventDefault();
});

.active .fa {
  color: green;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listers" data-event-attribute="1">
  <span class="listlogo"><i class="fa fa-lock"></i></span>Data 1
</div>

<div class="listers" data-event-attribute="1">
  <span class="listlogo"><i class="fa fa-lock"></i></span> Data 2
</div>

<div class="listers" data-event-attribute="1">
  <span class="listlogo"><i class="fa fa-lock"></i></span> Data 3
</div>

如何在jquery中删除nextall和prevall css颜色

1 个答案: