Перебирайте идентификаторы, сохраняйте значения, помещайте в массив

Question

Я хочу иметь возможность перебирать несколько идентификаторов, называемых "#option1", "#option2" и т. Д. Проблема заключается в интерактивной форме, и я не знаю, сколько будет вариантов. Поэтому мне нужен способ перебора суммы в DOM, когда пользователь нажимает ("#dothis").

Затем мне нужно получить значения этих опций, поместить в массив с именем arraylist.

$("#doThis").on("click", function() {
            var optionone = $("#option1").val();
            var optiontwo = $("#option2").val();
            var optionthree = $("#option3").val();
            var optionfour = $("#option4").val();
            var optionfive = $("#option5").val();
            var arrayList = [optionone, optiontwo, optionthree,
                optionfour, optionfive];
            var decide = arrayList[Math.floor(Math.random() *
                arrayList.length)];
            $("#verdict").text(decide);
        }); // end of dothis click event

Answer 1

Как сказал Энди, дайте каждому варианту одинаковый класс. В моем примере это "option-item".

$("#doThis").on("click", function() {
  var arrayList = [];
  $('.option-item').each(function(i) {
    arrayList[i] = $(this).val();
  });
  var decide = arrayList[Math.floor(Math.random() *
      arrayList.length)];
  $("#verdict").text(decide);
});

Каждое значение теперь хранится в массиве.

увидеть скрипку

Привет Тимми

Answer 2

С вашим кодом, как есть, вы можете использовать селектор, который выбирает все с идентификатором, который начинается с "option", например [id^="option"]вот как это использовать:

   $("#doThis").on("click", function () {
        var arrayList = [];
        $('[id^="option"]').each(function (index, element) {
            arrayList.push($(element).val() );
        });

        var decide = arrayList[Math.floor(Math.random() *
            arrayList.length)];
        $("#verdict").text(decide);
    }); // end of dothis click event