Добавление к счетчику в зависимости от значения опции выбора
У меня есть несколько входов select, все с двумя options, «да» и «нет».
Каждый раз, когда выбирается вариант «да», я хочу добавить 1 к счетчику. Я могу сделать это с помощью кода ниже.
Однако, если пользователь изменит значение на «нет», а затем снова на «да», тогда счетчик будет на 2 вместо 1, что нежелательно.
Как мне предотвратить это, чтобы, если они нажимают «да», он добавлял 1, а затем они меняли на «нет», он удалял 1. Но если они сначала нажимают «нет», он остается прежним?
var counter = 0;
jQuery("select#select1").change(function(){
var variable1 = jQuery(this).children("option:selected").val();
if (variable1 == 'yes') {
counter++;
alert("Counter:" + counter);
} else {
alert("Counter:" + counter);
}
});
jQuery("select#select2").change(function(){
var variable2 = jQuery(this).children("option:selected").val();
if (variable2 == 'yes') {
counter++;
alert("Counter:" + counter);
} else {
alert("Counter:" + counter);
}
});
jQuery("select#select3").change(function(){
var variable3 = jQuery(this).children("option:selected").val();
if (variable3 == 'yes') {
counter++;
alert("Counter:" + counter);
} else {
alert("Counter:" + counter);
}
});
В этом примере счетчик никогда не должен превышать 3, так как есть только 3 поля select. (Моя попытка решить проблему состояла в том, чтобы добавить else и получить -1, но это глупо)
Не используйте переменную счетчика. Когда вам нужен подсчет, просто используйте цикл, который подсчитывает количество выборок, для которых установлено значение yes.
Идеально подходит для ценностного предложения Бармар, спасибо! Но если я использую counter--, и они сначала выберут «нет», это установит счетчик на -1. Счетчик должен просто подсчитать количество полей select с ответом «да», которые будут равны 0, 1, 2 или 3.
Вот почему я удалил этот комментарий.
Да, Бармар, я только что увидел, как ты удалил, я медленно печатаю, ха-ха. Как мне создать цикл?
Ответы 1
Не обновляйте переменную счетчика, когда они выбирают из меню. Когда вам нужен счетчик, используйте цикл, который подсчитывает количество выборок со значением yes.
function get_count() {
var counter = 0;
$("select").each(function() {
if ($(this).val() == "yes") {
counter++;
}
});
return counter;
}
$("#show").click(function() {
alert(get_count());
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Option 1:
<select id = "select1">
<option value = "">Please choose</option>
<option value = "yes">Yes</option>
<option value = "no">No</option>
</select>
<br> Option 2:
<select id = "select2">
<option value = "">Please choose</option>
<option value = "yes">Yes</option>
<option value = "no">No</option>
</select>
<br> Option 3:
<select id = "select3">
<option value = "">Please choose</option>
<option value = "yes">Yes</option>
<option value = "no">No</option>
</select>
<br>
<button id = "show">Show count</button>Везде, где вы ранее читали переменную counter, замените ее на get_count(), и она рассчитает ее на основе текущих выборов.
Эй, учитывается ли это при изменении поля select? Или это всегда будет 0, так как это счетчик при загрузке страницы?
Вы делаете это каждый раз, когда вам нужен счетчик, а не только один раз.
Я превратил это в функцию. Поэтому вместо использования переменной используйте get_count()
Спасибо, Бармар, а в какой момент мне вызвать функцию?
В тех же точках вы ранее использовали переменную.
Извините, я запутался. Не будет ли это иметь ту же проблему, если пользователь выберет «да», а затем изменит тот же выбор на «нет», а затем снова на «да». Это по-прежнему добавит 2 к счетчику вместо 1?
Вы ничего не добавляете, когда пользователь выбирает. Когда вам нужно общее количество, вы вычисляете его на лету.
К вашему сведению, чтобы получить значение, вы можете просто использовать
$(this).val().