JQuery HTML Singular / Plural Text на основе выбора нескольких

Я пытаюсь получить единственное/множественное число для текста перед массивом в зависимости от того, сколько параметров выбрано в массиве.

Например, если выбран только один вариант, он должен быть Результат в категории 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));

});

Каков наилучший и элегантный способ приблизиться к этому?

Увеличьте переменную счетчика внутри вашего цикла $.each() или получите доступ $("#selectKat option:selected").length А затем, "Result"+(counter==1?"":"s")+" in ...

CBroe 17.05.2022 15:35
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
1
16
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать Литералы шаблонов (строки шаблонов)

Все, что я изменил, это следующая строка из:

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

Это работает, ОДНАКО, есть ли способ сделать это, заменив все слово, а не добавляя только «s» в конце? Мне может понадобиться другое слово (на другом языке)

Tudor 17.05.2022 15:42

@Tudor уверен, что сможешь. Вы можете заменить строку 's' или пустую строку '' переменной javascript или чем угодно.

caramba 17.05.2022 15:44

@Tudor смотрите обновленный ответ.

caramba 17.05.2022 15:47

Благодарю вас! Еще один офтопический вопрос, связанный с функцией humanLang: если вы выберете параметр, а затем отмените его выбор, он вернет «... и неопределенный». Есть идеи, почему это происходит?

Tudor 17.05.2022 15:48

Спасибо за обновленную версию, действительно простой и аккуратный способ решить эту проблему! :)

Tudor 17.05.2022 15:53

@Tudor обновил два фрагмента кода. Добавлена ​​еще одна проверка if (arr.length <= 0) return ''; вроде: вернуть пустую строку if (arr.length <= 0)

caramba 17.05.2022 15:53

Другие вопросы по теме