jQuery HTML 基于 select 多个的单数/复数文本

Question

我正在尝试根据数组中选择的选项数量获取数组前文本的 singular/plural。

例如，如果只选择了一个选项，则它应该是类别 1 中的结果
如果选择了两个或更多：类别 1、类别 2 和类别 3 中的结果

工作演示：https://jsfiddle.net/baidoct/xnjf9b0t/12/

$("#selectKat").change(function () {
  var ausbildungKatList = [];

  $.each($("#selectKat option:selected"), function () {
    ausbildungKatList.push($(this).val());
  });


   $('.asg-heading .dynamicKat').html("Result in " + humanLang(ausbildungKatList));

});

处理此问题的最佳且优雅的方法是什么？

Answer 1

您可以使用Template literals (Template strings)

我只更改了以下行：

$('.asg-heading .dynamicKat').html("Result in " + humanLang(ausbildungKatList));

到

$('.asg-heading .dynamicKat').html(`Result${ausbildungKatList.length > 1 ? 's': ''} in ${humanLang(ausbildungKatList)}`);

如果使用模板文字，您可以使用像这样的变量 ${variableName} 或者在这种情况下使用短 if/else.

function humanLang(arr) {
  if (arr.length <= 0) return '';
  if (arr.length === 1) return arr[0];
  const firsts = arr.slice(0, arr.length - 1);
  const last = arr[arr.length - 1];
  return firsts.join(', ') + ' and ' + last;
}

// Update Title
$("#selectKat").change(function () {
  var ausbildungKatList = [];

  $.each($("#selectKat option:selected"), function () {
    ausbildungKatList.push($(this).val());
  });

   $('.asg-heading .dynamicKat').html(`Result${ausbildungKatList.length > 1 ? 's': ''} in ${humanLang(ausbildungKatList)}`);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="asg-heading display-5">

  <span class="dynamicKat">Result in</span>
</h1>

<div class="form-floating">
  <label class="" for="selectKat">Ausbildungskategorie</label>
  <select class="form-select btn btn-neutral" multiple="multiple" id="selectKat">
    <option value="Category 1">Category 1</option>
    <option value="Category 2">Category 2</option>
    <option value="Category 3">Category 3</option>
    <option value="Category 4">Category 4</option>
  </select>
</div>

更新：用变量名替换整个单词

function humanLang(arr) {
  if (arr.length <= 0) return '';
  if (arr.length === 1) return arr[0];
  const firsts = arr.slice(0, arr.length - 1);
  const last = arr[arr.length - 1];
  return firsts.join(', ') + ' and ' + last;
}

// Update Title

const singularResult = 'Result';
const pluralResult = 'Results';

$("#selectKat").change(function () {
  var ausbildungKatList = [];

  $.each($("#selectKat option:selected"), function () {
    ausbildungKatList.push($(this).val());
  });

   $('.asg-heading .dynamicKat').html(`${ausbildungKatList.length > 1 ? pluralResult : singularResult} in ${humanLang(ausbildungKatList)}`);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="asg-heading display-5">

  <span class="dynamicKat">Result in</span>
</h1>

<div class="form-floating">
  <label class="" for="selectKat">Ausbildungskategorie</label>
  <select class="form-select btn btn-neutral" multiple="multiple" id="selectKat">
    <option value="Category 1">Category 1</option>
    <option value="Category 2">Category 2</option>
    <option value="Category 3">Category 3</option>
    <option value="Category 4">Category 4</option>
  </select>
</div>

jQuery HTML 基于 select 多个的单数/复数文本

jQuery HTML Singular / Plural Text based on select multiple

javascript

jquery