时间戳

首页 > 解决方案 > 仅将颜色应用于我单击的框

jquery - 仅将颜色应用于我单击的框

问题描述

我想将颜色应用于标签 colorCheckBox，它们都有唯一的数据 ID，数据 ID 来自colorBoxId = $(this).closest('tr').data('id');全局变量。问题在于，它不是一次只为一个标签添加颜色，而是同时为所有标签添加颜色。我有一张关于问题的图片 在 此处输入图片描述

当我单击标签时，这个 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]); 
  }
});

我想要的是只在我点击的标签上添加一种颜色。任何指针都会很好。

标签： jqueryhtmlcss

解决方案

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>

推荐阅读