неверный номер в текстовом поле при выборе новых кнопок

Question

У меня есть текстовое поле, в котором должно быть указано, сколько кнопок выбрано.

У меня проблема в том, что пользователь выбирает там кнопки, а затем добавляет эти кнопки в ряд. Теперь, если я выберу следующий набор кнопок, он будет добавлять ранее выбранные кнопки с текущими выбранными кнопками.

Например, если пользователь выбрал 2 кнопки, а затем добавил их в новую, то, если пользователь выбирает еще 2 кнопки, он должен указать, что выбраны 2 кнопки, но вместо этого он указывает выбранные кнопки.

Теперь причина этого в том, что у меня есть несколько текстовых полей с одним и тем же классом (.numberAnswerTxt), поэтому я думаю, что это сложение чисел. Так что мой вопрос в том, как я могу различать текстовые поля одного и того же класса.

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

Ниже приведен код jquery, который отображает количество кнопок, выбранных в текстовом поле:

$('.numberAnswerTxt').val($('.answerBtnsOn:visible').size());

Ниже приведен код jquery для новых строк, добавляемых каждый раз:

 $('.numberAnswerTxt', context).each(function() {
        var $this = $(this);
        var $noofanswersText = $("<input type='text' class='numberAnswerTxt' onkeyup='numberKeyUp(this)' onkeypress='return isNumberKey(event)' onChange='getButtons()'>").attr('name', $this.attr('name')).attr('value', $this.val())

        $noofanswers.append($noofanswersText);
    });

Ниже приведен HTML-код первого текстового поля:

<input type="text" name="numberAnswer" class="numberAnswerTxt" onkeyup="numberKeyUp(this)" onkeypress="return isNumberKey(event)" onChange="getButtons()" >

HTML кнопок, которые они выбирают:

<input class="answerBtns answers" name="answerAName"    id="answerA"        type="button"   value="A"       onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerBName"    id="answerB"        type="button"   value="B"       onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerCName"    id="answerC"        type="button"   value="C"       onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerDName"    id="answerD"        type="button"   value="D"       onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerEName"    id="answerE"        type="button"   value="E"       onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerFName"    id="answerF"        type="button"   value="F"       onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerGName"    id="answerG"        type="button"   value="G"       onclick="btnclick(this);"/>

код события onlick:

function btnclick(btn)
{
    var context = $(btn).parents('#optionAndAnswer');
    if (context.length == 0) {
        context = $(btn).parents('tr');
    }

    if (context.find(".numberAnswerTxt").val() == "") {
        alert('You must first enter in the number of answers you require in the textbox above');
        return false;
    }

    if ($(btn).hasClass("answerBtnsOn")) {
        $(btn).removeClass("answerBtnsOn").addClass("answerBtnsOff");
        return false;
    }

    var currenttotal = context.find('.answerBtnsOn').length;
    if (context.find(".numberAnswerTxt").val() <= currenttotal) {
        alert('You are not allowed beyond the limit of the number of answers you require, deselect other button');
        return false;
    }

    if ($(btn).hasClass("answerBtnsOff")) {
        $(btn).removeClass("answerBtnsOff").addClass("answerBtnsOn");
        return false;
    }
}

Ниже приведена функция добавления новой строки каждый раз, когда пользователь отправляет количество выбранных им кнопок:

function insertQuestion(form) {   


    var $tr = $("<tr></tr>");
    var $noofanswers = $("<td class='noofanswers'></td>");
    var $answer = $("<td class='answer'></td>");


   $('.numberAnswerTxt', context).each(function() {
        var $this = $(this);
        var $noofanswersText = $("<span class='oneanswer'>Only 1 Answer</span><input type='text' class='numberAnswerTxt' onkeyup='numberKeyUp(this)' onkeypress='return isNumberKey(event)' onChange='getButtons()'>").attr('name', $this.attr('name')).attr('value', $this.val())

        $noofanswers.append($noofanswersText);
    }); 


    $('#optionAndAnswer .answers').each(function() {
        var $this = $(this);
        var $newBtn = '';
        if($this.is(':visible')){
            $newBtn = $("<input class='answerBtnsRow answers' type='button' style='display: inline-block;' onclick='btnclick(this);' />").attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class'));
        }else{
            $newBtn = $("<input class='answerBtnsRow answers' type='button' style='display: none;' onclick='btnclick(this);' />").attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class'));
        }

        $answer.append($newBtn);
    });


    $tr.append($noofanswers);
    $tr.append($answer);

    $('#qandatbl').append($tr);

}

Answer 1

Полагаю, у вас также есть какая-то кнопка отправки. когда вы нажимаете на эту кнопку, вы должны сбросить все кнопки до значений по умолчанию. Класс и т. Д. Я думаю, что это не так.

Только при условии, что вы поместили свои кнопки в элемент div, а не вместе с кнопкой кнопки конечно. попробуйте это.

$('#myDiv input[type=button]').each(function(){
//if you dont say what class to remove it will just remove any class on it.
$(this).removeclass();
$(this).addclass('yourDefaultClass');

});