1. дома
  2. Вопрос и ответ
  3. JQuery: изменение радио-кнопки на нажатие следующей кнопки

JQuery: изменение радио-кнопки на нажатие следующей кнопки

2013-06-25 3 views
0 
<!DOCTYPE html> 
<html> 
<head> 
<Title> Title: My Quiz </title> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
</head> 
<body> 
<div> 
<span id="question">Welcom to my Game hit next to play...</span> 
</br> 
<span id="answer" >possible answers will go here...</span> 
</br> 

<button id ="up"> next </button> 
</div> 


<script> 
var allQuestions = [["Who is Prime Minister of the United Kingdom?","What is my favourite colour?"], [["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],["red","blue","green","another"]], [0,1]]; 
var questionIndex = 0 

$("#up").on("click", function() { 
questionIndex+=1 
$("#question").text("questionIndex = "+ questionIndex + "--Question " + questionIndex +": " + allQuestions[0][questionIndex-1]) 
}); 


//$("#up").on("click", function() { 

//for(i=0;i<4;i++){ 
//$("#answer").text("<input type="radio" name="group1" value="Milk">" +allQuestions[1][questionIndex-1][0]+ "<br>") 
//} 
//}); 

</script> 

</body> 
</html>

Как изменить «Span ID =» ответ «» на что-то вродеJQuery: изменение радио-кнопки на нажатие следующей кнопки

<input type="radio" name="colour" value="blue">Blue<br> 
<input type="radio" name="colour" value="red">Red<br> 
<input type="radio" name="colour" value="green">Green<br> 
<input type="radio" name="colour" value="another">Another<br>

То, что я пытаюсь сделать, это изменить «диапазон ID = «ответить», чтобы быть радиокнопками, и при нажатии следующей будет отображен следующий набор ответов. Это уже работает для «span id =» вопрос «» в минуту (нужно немного убирать).

Relevant JSFiddle Link

источник

2013-06-25 HattrickNZ

+0

Важный момент во всех ответах в том, что вы должны использовать '.html()', чтобы впрыснуть HTML в '' #answer – gibberish

+0

спасибо за предложения. это много пищи для размышлений, я буду работать через них. tks – HattrickNZ

ответ

3

я принял удар на просто получить эту работу

http://jsfiddle.net/G3wsd/8/

var allQuestions = ["Who is Prime Minister of the United Kingdom?","What is my favourite colour?"]; 
var allAnswers = [["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],["red","blue","green","another"]]; 
var index = 0 

$("#up").on("click", function() { 
    $("#question").text("Question " + (index + 1) +": " + allQuestions[index]) 

    var answers = ''; 
    $(allAnswers[index]).each(function(i) { 
     answers += '<input type="radio" name="group' + index + '" value="' + allAnswers[index][i] + '">' + allAnswers[index][i] + '<br>' 
    }); 

    $("#answer").html(answers); 

    index+=1; 
} 
);

Однако я не думаю, что это лучший способ получить результаты. Я бы предложил несколько асинхронных вызовов с результатами данных JSON.

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

источник

2013-06-25 21:04:15

0

Я также принял удар в этом (этот пример автономный и проверенный), но занял больше времени, чем Уильям ... Хорошая работа, Уильям.

jsFiddle here

<html> 
    <head> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 

       var allQuestions = ["Who is Prime Minister of the United Kingdom?","What is my favourite colour?"]; 
       var allAnswers = ["Gordon Brown|Tony Blair|Mohammed Al Fayed|Barack Obama","Green|Red|Blue|Brown"]; 
       var questionIndex = 0 
       var ndx = 0 

       $("#up").on("click", function() { 
        questionIndex+=1 
        $('#question').text(allQuestions[ndx]); 
        var xx = allAnswers[ndx]; 
        var yy = makeHTML(xx); 
        $('#answer').html(yy); 
        ndx++; 
       }); 


       function makeHTML(arr) { 
        var aAns = arr.split('|'); 
        var h = '<input type="radio" name="color" value="' +aAns[0]+ '">' +aAns[0]+ '<br><input type="radio" name="color" value="' +aAns[1]+ '">' +aAns[1]+ '<br><input type="radio" name="color" value="' +aAns[2]+ '">' +aAns[2]+ '<br><input type="radio" name="color" value="' +aAns[3]+ '">' +aAns[3]+ '<br>'; 
        return h; 
       } 


      }); //END $(document).ready() 

     </script> 
    </head> 
<body> 

    <div> 
     <span id="question">Welcome to my Game hit next to play...</span> 
     </br> 
     <span id="answer" >possible answers will go here...</span> 
     </br> 
     <button id ="up"> next </button> 
    </div> 


</body> 
</html>

источник

2013-06-25 21:15:12 gibberish

+0

tks, но не смог заставить это работать в браузере, но мог в Fiddle. – HattrickNZ

0

Мое решение, вероятно, хуже всего один ... я держал все в одном массиве. : D

var allQuestions = [ 
["Who is Prime Minister of the United Kingdom?","What is my favourite colour?"], 
[["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],["red","blue","green","another"]], [0,1]]; 
var questionIndex = 0; 

$("#up").on("click", function() { 
questionIndex+=1 
$("#question").text("questionIndex = "+ questionIndex + "--Question " + questionIndex +": " + allQuestions[0][questionIndex-1]); 

answers=allQuestions[1][questionIndex-1]; 

ans_html=''; 
for(i=0;i<answers.length;i++) { 

ans_html+='<input type="radio" name="'+allQuestions[0][questionIndex-1]+'" value="'+answers[i]+'">'+answers[i]+'<br>'; 

} 

$("#answer").html(

ans_html 



); 
}); 


//$("#up").on("click", function() { 

//for(i=0;i<4;i++){ 
//$("#answer").text("<input type="radio" name="group1" value="Milk">" +allQuestions[1][questionIndex-1][0]+ "<br>") 
//} 
//});

источник

2013-06-25 21:17:39 sinisake

 Смежные вопросы

  • Нет связанных вопросов^_^