Javascript / Jquery: Показать скрытый div, основанный на выборе Radio box

Question

То, что я делаю, - это создание формы, где, когда вы выбираете один ответ, всплывает куча новых вопросов.

Это мой рабочий код:

$(".appliedWorked").click(function(){
   if($(this).val()==="appliedWorkedYes") 
      $(".appliedWorkedYesHide").show("fast"); 
   else 
      $(".appliedWorkedYesHide").hide("fast");
});

Работает только для 1 класса.Я хочу сделать это для многих классов, поэтому я решил добавить это в массив.

Вот мой код для многих классов, но он не отображается, когда я нажимаю "Да" на радиобоксе:

// storing an array of radio boxe class names
var radioBoxArray = new Array(
        "appliedWorkedYes",
        "workStudyYes",
        "workHistoryYes",
        "workWeekEndsYes",
        "cprYes",
        "aedYes",
        "aidYes",
        "wsiYes",
        "gaurdYes"
        );

// looping over the radio box array, too use the show feature of jquery
for(var j = 0; j < radioBoxArray.length; j++){
    // class name
    $("."+radioBoxArray[j]).click(function(){
        // value box
        if($(this).val()==='"+radioBoxArray[j]+"') 
            // show method
            $("."+radioBoxArray[j]+"Hide").show("fast"); 
        // hide else 
        else $("."+radioBoxArray[j]+"Hide").hide("fast");

    });

}

Я думаю, что проблема:

if($(this).val()==='"+radioBoxArray[j]+"') 

ПожалуйстаПомогите!

Я пробовал следующее, но не будет отображаться при нажатии на поле:

if($(this).val()=== radioBoxArray[j])

if($(this).val()=== String( radioBoxArray[j] ))

if($(this).val()==='"'+radioBoxArray[j]+'"')

Answer 1

Посмотрите на подсветку синтаксиса в вашем вопросе. В

if($(this).val()==='"+radioBoxArray[j]+"')

правая часть этого теста - просто строка '"+radioBoxArray[j]+"'. Удалить все эти цитаты.

if($(this).val() === radioBoxArray[j])

Другая уборка:

• Объявление массива с использованием литеральной записи массива:

  var radioBoxArray = [
  "appliedWorkedYes",
  "workStudyYes",
  "workHistoryYes",
  "workWeekEndsYes",
  "cprYes",
  "aedYes",
  "aidYes",
  "wsiYes",
  "gaurdYes"];
  

• Сохраните значение radioBoxArray.length в локальной переменной, иначе оно будет пересчитываться на каждой итерации. Также сохраните radioBoxArray[j] в локальной переменной (это также более эффективно).

  var len = radioBoxArray.length,
      radio;
  for(var j = 0; j < len; j++){
      radio = radioBoxArray[j];
      // class name
      $("."+radio).click(function(){
          if($(this).val() === radio) $("."+radio+"Hide").show("fast");
          else $("."+radio+"Hide").hide("fast");
      });
  }
  

• Вместо использования отдельных вызовов show() и hide() используйте .toggle(showOrHide)

Окончательный код можно очистить так:

var radioBoxArray = [
    "appliedWorkedYes",
    "workStudyYes",
    "workHistoryYes",
    "workWeekEndsYes",
    "cprYes",
    "aedYes",
    "aidYes",
    "wsiYes",
    "gaurdYes"
    ],

    len = radioBoxArray.length,
    radio;

for (var j = 0; j < len; j++) {
    radio = radioBoxArray[j];
    // class name
    $("." + radio).click(function() {
        $("." + radio + "Hide").toggle($(this).val() === radio);
    });
}

В качестве альтернативы вы можете использовать $.each():

var radioBoxArray = [
    "appliedWorkedYes",
    "workStudyYes",
    "workHistoryYes",
    "workWeekEndsYes",
    "cprYes",
    "aedYes",
    "aidYes",
    "wsiYes",
    "gaurdYes"
    ];

$.each(radioBoxArray, function(i, v) {
    $("." + v).click(function() {
        $("." + v+ "Hide").toggle($(this).val() === v);
    });
});

Answer 2

Попробуйте это:

var radioBoxArray = [
        "appliedWorked",
        "workStudy",
        "workHistory",
        "workWeekEnds",
        "cpr",
        "aed",
        "aid",
        "wsi",
        "gaurd"
];

$.map(radioBoxArray, function(cls) {
   $('.' + cls).click(function() {
        // value box
        if($(this).val()===cls + 'Yes') 
            // show method
            $("."+cls+"YesHide").show("fast"); 
        // hide else 
        else $("."+cls+"YesHide").hide("fast");
   });
});

Надеюсь, это поможет!

Answer 3

Измените его на:

if($(this).val()==='"'+radioBoxArray[j]+'"')

Answer 4

if($(this).val()==='"+radioBoxArray[j]+"') is not correct

Попробуйте

if($(this).val()=== radioBoxArray[j])

или

if($(this).val()=== String( radioBoxArray[j] ))

Надеюсь, что поможет