Question

我希望用户能够从一行添加到CSS的复选框中进行选择。

我正在使用JS搜索复选框，选择名称，放入列表中，然后将列表放入CSS中，作为属性的值。

我无法确定它是错误地进入CSS还是完全不进入。

$(document).ready(function () {

  var checkbox = document.querySelector('[type="checkbox"]');

  checkbox.addEventListener('change', function() {
      getOTFeaturesTextA();
  });
});

function getOTFeaturesTextA(){

  var textA = document.getElementById("textA"),
    chkArray = [];

  $(".ot-textA:checked").each(function() {
    chkArray.push($(this).val());
  });

  var selected;
  selected = chkArray.join(',') ;

  if(selected.length > 0){
    textA.css("font-feature-settings", selected + ", liga");	
  }else{
    textA.css("font-feature-settings", "liga");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ot-checkboxes">
  <p>
    <label>
      <input type="checkbox" name="frac" value="'frac'" class="ot-textA" id="frac">
      Fraction</label>
    <br>
    <label>
      <input type="checkbox" name="aalt" value="'aalt'" class="ot-textA" id="aalt">
      Alternatives</label>
    <br>
        <label>
      <input type="checkbox" name="onum" value="'onum'" class="ot-textA" id="onum">
      Oldstyle Numbers</label>
  </p>
</div>
<div id="textA" contenteditable="true"><span>Trying out checkboxes 3/4 </span></div>

Answer 1

在此用例中，使用样式而不是CSS

textA.style['font-feature-settings'] = selected + ", liga";

Answer 2

对于初学者来说，香草js上没有.css()这样的东西。您可能要使用.style或使用jquery来获取元素。

function getOTFeaturesTextA(){
    const textA = $("#textA");
    const chkArray = [];

    $(".ot-textA:checked").each(function() {
        chkArray.push($(this).val());
    });

    const selected = chkArray.join(',');

    if(selected.length > 0){
        textA.css("font-feature-settings", selected + ", liga");    
    }else{
        textA.css("font-feature-settings", "liga");
    }
}

注意：避免使用var，并且尽可能不要在一行中声明变量。如果您要在下一行之后立即使用它，则无需声明一个空变量。

Answer 3

我对您的示例代码进行了一些更改。

从复选框值中删除引号
将单个更改侦听器添加到复选框的容器元素，而不是每个复选框侦听器。
由于应该始终存在“ liga”，因此我将其用作要使用选定功能构建的数组中的初始项。这样就无需检查是否已选择功能，而只需分配liga功能。

我不确定您使用ES6功能的舒适程度如何，因此我对示例进行了编码，使其在某种程度上与您的样式匹配。当然，有些事情可以进一步优化或以其他方式完成。

$(document).ready(function () {
  var checkboxContainer = document.getElementById('ot-checkboxes');
  
  if (checkboxContainer !== null) {
    // There is no need to wrap the event listener in another method first.
    checkboxContainer.addEventListener('change', getOTFeaturesTextA);
  }
});

function getOTFeaturesTextA(){
  var 
    textA = document.getElementById("textA"),
    selectedFeatures = document.querySelectorAll('.ot-textA:checked');
    // The liga feature should always be present. All feature names should be
    // wrapped in quotes.
    features = ['"liga"'];

  selectedFeatures.forEach(function(selectedFeature) {
    features.push('"' + selectedFeature.value + '"');
  });

  // Set the style by joining all the items in the array with a
  // comma as separator.
  textA.style.fontFeatureSettings = features.join(',');	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ot-checkboxes">
  <p>
    <label>
      <input type="checkbox" name="frac" value="frac" class="ot-textA" id="frac">
      Fraction</label>
    <br>
    <label>
      <input type="checkbox" name="aalt" value="aalt" class="ot-textA" id="aalt">
      Alternatives</label>
    <br>
        <label>
      <input type="checkbox" name="onum" value="onum" class="ot-textA" id="onum">
      Oldstyle Numbers</label>
  </p>
</div>
<div id="textA" contenteditable="true"><span>Trying out checkboxes 3/4 </span></div>

从复选框中获取列表并插入CSS

3 个答案: