javascript - 只给我点击样式的元素

Question

我正在为我的页面制作一个过滤器。一切正常，但我无法解决的唯一问题是如何为我按下的按钮提供样式。当我尝试使用 jQuery 时，它为所有按钮提供了样式。

这是我使用的代码:

<div class="filter_options">
    <!-- <div class="map_trigger"></div>
    <div class="list_trigger active"></div>-->
<h3 style="display: inline-block; margin-top: 15px!important;">Kies een discipline: </h3>
    <div id="uwpqsf_id">
    <form id="uwpqsffrom_43">
        <div class="uform_title">Projecten</div>
           <input type="hidden" name="unonce" value="8fa32e7b04">
           <input type="hidden" name="uformid" value="43">
           <input type="hidden" id="uajaxdiv" value=".projecten_list">
           <div class="uwpqsf_class " id="tax-radio-0">
              <span class="taxolabel-0">Disciplines</span>
              <input type="hidden" name="taxo[0][name]" value="Werkgebied">
              <input type="hidden" name="taxo[0][opt]" value="">
              <label>
              <input type="radio" id="tradio-0-0" class="tradio-0" name="taxo[0][term]" value="uwpqsftaxoall">Disciplines</label>
              <label>
              <input type="radio" id="tradio-0-1" class="tradio-0" name="taxo[0][term]" value="bagger">Bagger</label>
              <label><input type="radio" id="tradio-0-2" class="tradio-0" name="taxo[0][term]" value="groen">Groen</label>
              <label><input type="radio" id="tradio-0-3" class="tradio-0" name="taxo[0][term]" value="infra">Infra</label>
              <label><input type="radio" id="tradio-0-4" class="tradio-0" name="taxo[0][term]" value="milieutec">Milieutec</label></div>    

                    <script type="text/javascript">jQuery(document).ready(function($) {
    var formid = "#uwpqsffrom_43";
    $(formid).find('input, textarea, button, select').change(function(){ 
        process_data($(this)); 

        })
      ;})</script>
  <div style="clear:both"></div></form></div>       </div>

我需要在我点击的标签上设置样式，我已经尝试使用 onclick 标签功能，但它为所有标签提供了 css。

这是我试过的代码:

$( document ).ready(function() {
    $("label").click(function(){
       $("label").css("background-color: black;");
    });
});

我也无法向 HTML 添加任何新的 ID 或类，因为它是由插件生成的..

Answer 1

如果你通过插件推送标签，你需要像这样改变你的代码

$(function(){
   $(document).on('click', 'label', function(){
      $(this).css("background-color", "red");
   });
});

$(function(){
    $(document).on('click', 'label', function(){
	 if( $('label').hasClass('red')){
	   $(this).each(function(index, element) {
              $('label').removeClass('red');
           });
	 }
       $(this).addClass('red')
    });
});

.red {
   background:red;
}

<label> click me </label>
<label> click me </label>
<label> click me </label>
<label> click me </label>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>