"추가"버튼을 클릭 한 후 답변 버튼을 변경하는 방법은 무엇입니까?

Question

사용자가 옵션과 답변을 선택할 수있는 [여기] [1] 응용 프로그램이 있습니다. 신청서에 다음 단계를 따르십시오.

• 1 단계 : 열려있는 응용 프로그램, 당신이 그것을에 "열기 그리드"링크 클릭을 볼 수 당신이 옵션을 선택한 후이 하단에 응답 버튼이 표시됩니다, 옵션 유형을 선택합니다. 예를 들어 옵션을 선택하면 "A - E", 대답 선택 표시가 8 일 경우 , 8 개의 대답 버튼 "A-H"가 표시됩니다.

이제 괜찮습니다. 볼 수 있듯이 그리드에서 선택한 옵션에 따라 정확한 응답 버튼 수가 나타납니다. 하지만 사용자가 이전 옵션을 추가하려는 경우 문제가 있습니다.

• 2 단계 : 다음 단계에서 찾아보세요 당신이 모달 창을 열 것이다, 에를 클릭, 왼쪽에 녹색 더하기 버튼이 표시됩니다.
• 3 단계 : 검색 상자에 "AAA"를 입력하고 "제출" 버튼을 클릭하면 데이터베이스의 행이 표시됩니다.
• 4 단계 : 첫 번째 행을 보면 "Option Type"열에서 A-D임을 알 수 있습니다. '추가'버튼을 클릭하여이 행을 선택하십시오.

무엇이 일어날 것은 모달 창을 닫습니다 당신이 대답과 오른쪽에 옵션 제어를 보면, 당신은 옵션 유형 텍스트 상자에 포함 된 것을 볼 수 있다는 것입니다 수 4 (이것은 Option Type이 "AD"이므로 "A, B, C, D"옵션이 4 가지이므로 답변 버튼 AD를 표시해야하지만 답변 버튼을 전혀 변경하지는 않습니다. 같은.

내 질문은 사용자가 "추가"버튼을 클릭 한 후 정확한 응답 버튼을 표시하는 방법입니다.

다음

$('.gridBtns').on('click', function() 

      { 

    var clickedNumber = this.value; 

     $(this).closest('.option').siblings('.answer').find('.answers').each(function(index) { 
    if (!isNaN(clickedNumber) && index < clickedNumber) { 
    $(this).show(); 


    } else { 

    $(this).hide(); 
    $(this).removeClass('answerBtnsOn'); 
    $(this).addClass('answerBtnsOff'); 

    } 

    var $this = $(this); 
    var context = $this.parents('.optionAndAnswer'); 
    console.log($this); 


       }); 

if (clickedNumber === 'True or False') { 

    $(this).closest('.option').siblings('.answer').find('input[name=answerTrueName]').show(); 
    $(this).closest('.option').siblings('.answer').find('input[name=answerFalseName]').show(); 

} else if (clickedNumber === 'Yes or No') { 

     $(this).closest('.option').siblings('.answer').find('input[name=answerYesName]').show(); 
     $(this).closest('.option').siblings('.answer').find('input[name=answerNoName]').show(); 

} 




       getButtons(); 

      }); 


     }); 

    function getButtons() 
    { 
     var i; 
     if (initClick == 0) { 
for (i = 65; i <= 90; i++) { // iterate over character codes for A to Z 
$("#answer" + String.fromCharCode(i)).removeClass("answerBtnsOn").addClass("answerBtnsOff"); 

      } 

      initClick = 1; 
     } 
// code above makes sure all buttons start off with class answerBtnsOff, (so all button are white). 
    } 

그것은 "추가"버튼을 클릭 한 후 발생하는 제어 기능입니다 : 아래

는 옵션이 그리드에서 선택 후 응답 버튼을 가져 오는 코드입니다

function addwindow(numberAnswer,gridValues) { 

     if(window.console) console.log(); 

     if($(plusbutton_clicked).attr('id')=='mainPlusbutton') { 


      $('#mainNumberAnswerTxt').val(numberAnswer); 
      $('#mainGridTxt').val(gridValues); 
      } else { 
$(plusbutton_clicked).closest('tr').find('input.numberAnswerTxtRow').val(numberAnswer); 
$(plusbutton_clicked).closest('tr').find('input.gridTxtRow').val(gridValues); 
       } 

     $.modal.close(); 
     return false; 
    } 

Answer 1

위의 코드와 제공된 링크의 HTML 소스 코드를 분석 한 후에는 한 발짝 뒤로 간 것 같습니다. mainGridTxt 입력 상자에 그리드 값 (위의 경우 4) 만 지정하고 있습니다. 그리드 단추에서 click 이벤트를 트리거해야합니다.

은 ID 'btn4'와 그리드 버튼의 클릭 이벤트를 트리거 코드 위 $ model.close

$('#btn'+gridValues).trigger('click'); 

후 아래 코드를 삽입합니다.