Как отображать кнопки с помощью $ (this) .show ();

Question

У меня есть две сетки, они обе отображают кнопки. Одна сетка отображает числа, true или false и да или нет, а другая сетка отображает буквы, true, false, yes и no.

Вторая сетка не отображается в коде (используется css, чтобы не отображать кнопки второй сетки (.answerBtns)).

Теперь я включил это в свой код:

var clickedNumber = 10;
$('.answerBtns').each(function (index) {
    if (index < clickedNumber) {
        $(this).show();
    }
});

Теперь, что это делает, независимо от того, какую кнопку я выберу в первой сетке, она всегда будет отображать 10 кнопок. Так что мне нужно, чтобы clickNumber был в цикле, чтобы он циклически проходил по кнопкам, поэтому, если пользователь выбирает кнопку «1» в первой сетке (сетка, которую вы должны открыть, используя ссылку (Open Grid), то она должна отображать первая кнопка «A» во второй сетке, если пользователь выбирает кнопку «2» в первой сетке, то она должна отображать первые две кнопки «A» и «B» во второй сетке, если «3», то отображать «A» , "B" и "C" и т. Д.

Но также, если пользователь выбирает кнопку «Истина или Ложь» в первой сетке, он должен отображать только кнопки «истина» и «ложь» во второй сетке, а если пользователь выбирает кнопку «да или нет» в первой сетке, он должен отображать Кнопки «Да» и «Нет» только во второй сетке.

Кто-нибудь знает, как это сделать?

Спасибо

Код находится в jsfiddle, нажмите здесь

Answer 1

Если вы добавите следующее в конец вашей функции buttonclick(), она покажет или скроет соответствующее количество кнопок, как вы можете видеть в этом обновленном jsfiddle .

$('.answerBtns').each(function (index) {
   if (index < button.value)
      $(this).show();
   else
      $(this).hide();
});

Обратите внимание, что это в основном то же самое, что и фрагмент из вашего вопроса, за исключением использования значения из нажатой кнопки вместо жестко заданного 10.

Но в целом, если вы используете jQuery, тогда используйтеJQuery .То есть не вставляйте встроенные обработчики onclick в каждую из ваших кнопок.Все они просто говорят onclick="buttonclick(this);", и все они имеют один и тот же класс, так что вы должны удалить эти встроенные обработчики из вашего HTML и настроить их с помощью jQuery.

Так что вы можете заменить функцию clickclick чем-то вроде этого:

$(".gridBtns").click(function() {
   // what you need from your "buttonclick(button)" function should go here
   // except instead of the "button" parameter you can just use "this",
   // e.g., this.value

   var clickedNumber = this.value;

   $('.answerBtns').each(function (index) {
      if (index < clickedNumber)
         $(this).show();
      else
         $(this).hide();
   });

});

У меня нет времени, чтобы сделать часть "да или нет" для вас, но, возможно, вы можете понять это из вышеизложенного?В обработчике кликов вы можете проверить if (this.value==="yes or no") и т. Д.