2013-11-14 3 views
1

Я пытаюсь создать вопрос mcq с динамическим id с помощью jquery. но я застрял, когда я определяю уникальный идентификатор для варианта каждого вопроса. может ли кто-нибудь помочь мне найти способ создания уникального идентификатора для каждого параметра mcq? Ниже мой JQueryДобавить текстовое поле в jquery

<html> 
<head> 
<script type="text/javascript" src="jquery-1.10.2.min.js"></script> 
</head> 

<body> 
<script type="text/javascript"> 

$(document).ready(function(){ 
var counter = 2;//question 

$("#addQuestion").click(function() { 

var newTextBoxDiv = $(document.createElement('div')) 
    .attr("id", 'TextBoxDiv' + counter); 

newTextBoxDiv.after().html('<label>Q'+ counter + ' : </label>' + 
     '<input type="text" name="textbox' + counter + 
     '" id="textbox' + counter + '" value="" >' + '</br>' + 
     '<label>A. </label>'+ 
     '<input type="text" id="Q'+counter+'choice1">' + 
     '<input type="button" value="Add Option" id="'+ counter + '">'); 

newTextBoxDiv.appendTo("#TextBoxesGroup"); 


counter++; 
}); 

$("#removeQuestion").click(function() { 
if(counter==1){ 
     alert("No question that can be deleted"); 
     return false; 
    } 

counter--; 

    $("#TextBoxDiv" + counter).remove(); 

}); 

//$("#getButtonValue").click(function() { 

// var msg = ''; 
//for(i=1; i<counter; i++){ 
// msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val(); 
//} 
//  alert(msg); 
//}); 
}); 
</script> 
</head><body> 

здесь HTML-

<div id='TextBoxesGroup'> 
<div id="TextBoxDiv1"> 
    <label>Q1 : </label><input type='textbox' id='textbox1' ></br> 
    <label>A. <input type='text' id='Q1choice1'> 
    <input type='button' value='Add Option' id='1'> 
</div> 
</div> 
<input type='button' value='Add Question' id='addQuestion'> 
<input type='button' value='Remove Question' id='removeQuestion'> 

</body> 
</html> 
+1

Что не работает? –

+0

@ user2310289 Я застрял в создании динамического id для опции mcq. – user2779065

+0

Я не вижу, что не так - counter - глобальная переменная –

ответ

1

Вы должны определить счетчик уага перед тем document.ready

Does not work: 
$(document).ready(function() { 
     var counter = 2;//question 



    Works: 
var counter = 2;//question 
$(document).ready(function() { 

EDIT: счетчик только глобальный определяются вне $ (документ) .ready

0

Попробуйте добавить newTextBoxDiv в вашем коде:.

.... var newTextBoxDiv = $(document.createElement('div'))... 
     .attr("id", 'TextBoxDiv' + counter); 
    $('body').append(newTextBoxDiv); 
    ... newTextBoxDiv.after().html('<label>Q'.... 

$ ('тело') добавляет (newTextBoxDiv);

0

попробовать что-то вроде этого

var counter = $("#TextBoxesGroup div").length; 
Смежные вопросы