Question

我的代码有问题，所有语句都已设置我想在总和处于特定范围内时，将向每个ID添加一个CSS

$(document).ready(function($) {
      var sum = 0;
      var numberQA = 4
      $('.skillA:checkbox').click(function() {
        sum = 0;
        $('.skillA:checkbox:checked').each(function(idx, elm) {
          // idx: index position of selector, elm = this selector,
          sum += parseInt(elm.value, 10);
        });
        // average = sum / numberQA;   
        $('#totalSkillA').html(sum);

        if (4 <= sum && sum <= 6) {
          $('#communicationSkill1').css({
            "backgroundColor": "#087cb7",
            "color": "white"
          })
        } else if (7 <= sum && sum <= 10) {
          $('#communicationSkill2').css({
            "backgroundColor": "#087cb7",
            "color": "white"
          })
        } else if (11 <= sum && sum <= 13) {
          $('#communicationSkill3').css({
            "backgroundColor": "#087cb7",
            "color": "white"
          })
        } else {
          $('#communicationSkill4').css({
            "backgroundColor": "#087cb7",
            "color": "white"
          })
        }

      });

Answer 1

您的代码可以正常工作，但我认为您希望单击另一个复选框时突出显示突出显示的元素。该行丢失了，所以我添加了它。我还使用了适当的类，而是使用了addClass。

$(document).ready(function($) {
  var sum = 0;
  var numberQA = 4
  $('.skillA:checkbox').click(function() {
    sum = 0;
    $('.skillA:checkbox:checked').each(function(idx, elm) {
      sum += parseInt(elm.value, 10);
    });

    // remove the highlight
    $('div').removeClass('highlight')
    if (4 <= sum && sum <= 6) {
      $('#communicationSkill1').addClass('highlight');
    } else if (7 <= sum && sum <= 10) {
      $('#communicationSkill2').addClass('highlight');
    } else if (11 <= sum && sum <= 13) {
      $('#communicationSkill3').addClass('highlight');
    } else {
      $('#communicationSkill4').addClass('highlight');
    }
  });
});

.highlight {
  background-color: #087cb7;
  color: white;
}

div {
  background-color: white;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="skillA" type="checkbox" value="1">1
<input class="skillA" type="checkbox" value="4">2
<input class="skillA" type="checkbox" value="8">3
<input class="skillA" type="checkbox" value="11">4
<br/><br/>
<div id="communicationSkill1">communicationSkill1</div>
<div id="communicationSkill2">communicationSkill2</div>
<div id="communicationSkill3">communicationSkill3</div>
<div id="communicationSkill4">communicationSkill4</div>

Answer 2

如果要设置$（'＃communicationSkill1'）。css（{“ background-color”：“＃087cb7”，“ color”：“ white”}）

请替换backgroundColor-> background-color

使用if时设置所有语句

2 个答案: