Question

我想将颜色应用于标签colorCheckBox，并且它们都有唯一的数据ID 数据ID来自colorBoxId = $(this).closest('tr').data('id');，该变量是全局变量。问题在于，它不是一次只为一个标签添加颜色，而是一次为所有标签添加颜色。我有这个问题的照片 enter image description here

当我单击标签时，该div将显示

<div class="colorList" id="colorSelectFilter" style="display:none; padding: 20px;">
  <a href="#" data-value="1">Grön(Godkännn)<div class="greenBox"></div></a>
  <a href="#" data-value="2">Röd(Slå av)<div class="redBox"></div></a>
  <a href="#" data-value="3">Gul(Kontrollera)<div class="yellowBox"></div></a>
</div>

然后，当我单击colorSelectFilter时，会在jquery中发生

const colors = [null, 'green', 'red', 'yellow'];
$("#colorSelectFilter").find('a').click(function(event){
  event.preventDefault();

  const filter = parseInt($(this).data('value'));
  alert(colorBoxId + "Ska skickas till ajax!!");
  // Skapa en variabel utan för med noll som värde
  // som vi sen ska fylla med id från respektive id
  // SOm vi sen skickar iväg med ajax

  var totalColor = colors[filter];
  console.log(colors[filter] + "ErrandSelect");

  if (!isNaN(filter)) {
    // This is the problem; it adds color
    $('.colorCheckBox').css('background-color', colors[filter]); 
  }
});

我想要的是仅在单击的标签上添加颜色。任何指针都很好。

Answer 1

回调函数中的event参数具有一个名为target的属性，该属性引用被单击的元素，您可以通过jQuery函数将其传递以与jQuery一起使用，请参见下面的示例。

$('.foo').click(event => {
  $(event.target).css('color', 'red');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="foo">Div #1</div>
<div class="foo">Div #2</div>
<div class="foo">Div #3</div>

仅对单击的框应用颜色

1 个答案: