基于多選的jQueryHTML單數/復數文本

我正在嘗試根據陣列中選擇的選項數量來獲取陣列之前文本的單數/復數。

例如，如果只選擇了一個選項，如果選擇了兩個或更多選項，則應為Result in Category 1 ： Results in Category 1、Category 2 和 Category 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));

});

解決這個問題的最佳和優雅的方法是什么？

uj5u.com熱心網友回復：

您可以使用模板文字（模板字串）

我所做的只是以下行：

$('.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>

標籤：javascript jQuery

上一篇：我想根據給定的模式按每個單詞的第二個字母對arr中的單詞進行排序

下一篇：在RazorPage中的C#for回圈中的函式以隱藏/取消隱藏照片