删除.click，但仍然附加功能的输入 - 测验淡出输入

我现在有一个测验，执行以下操作：用户选择一个单选按钮。在提交选定的答案时，淡入。感谢所有对答案有贡献的人。

**提交按钮不提交到数据库或其他脚本语言

// ************** Quiz 2 (right side) ********************// 
var selectAnswer = function(){ 
var answer = $("input[name='radio2']:checked").val(); 
    console.log(answer); 
     if(answer=='correct2') { 
      $("#quiz2").fadeOut(function(){ 
       $("#correct2").fadeIn();    
       }); 
      $("#wrong1a").hide(); 
      } 
    if(answer=='wrong1a') { 
     $("#quiz2").fadeOut(function(){ 
      $("#wrong1a").fadeIn(); } 
     )}; 

    if(answer=='wrong2a') { 
     $("#quiz2").fadeOut(function(){ 
      $("#wrong2a").fadeIn(); } 
      )}; 

    if(answer=='wrong4a') { 
     $("#quiz2").fadeOut(function(){ 
      $("#wrong4a").fadeIn(); 
     }); 

     $("#correct2").hide(); 

     } 
     //end of of selectAnswer\ 

// end of of selectAnswer 
}; 
$(document).ready(function(){ // when the submit button is pressed, run selectAnswer function 
    $("#submitButton2").click(selectAnswer); 

$("#correct2").hide(); 
$("#wrong1a").hide(); 

});

HTML

<div class="inputs_bg4"><input name="radio2" type="radio" value="wrong1a"></div></td> 
<div class="inputs_bg4"><input name="radio2" type="radio" value="wrong2a"></div></td> 
<div class="inputs_bg3"><input name="radio2" type="radio" value="correct2"></div></td> 
<div class="inputs_bg4"><input name="radio2" type="radio" value="wrong4a"></div></td>

来源

2011-10-24 latoyale

如果问题得到解答，请注明它作为回答，这样未来的Google请不要将它。谢谢！ :) – Whetstone

只要删除$("input[name='radio2']").click(function() {}周围selectAnswer并在第一行使用var answer = $("input[name='radio2']:checked").val();。

来源

2011-10-24 17:47:25

虽然效率很高，但这个实现的一个潜在问题是，只要用户单击单选按钮，就不会被调用，我认为这是我们想要的。如果LaToya只是在提交表单时运行，那么您的解决方案肯定是更好的解决方案。 – Whetstone

是的，这是真的。也许我误解了这个问题。 –

此外，@Interstellar_Coder采取了类似的方法，这让我意识到我发布的内容中存在一个错误。更新。 –

在单选按钮列表中使用.change（）应该解决这个问题。

$("input[name=radio2]").bind("change", function(){});

确保你把单选按钮被加载后会被读，但是用户之前将有机会实际操作单选按钮这种结合的地方。

编辑：如果你只是想在选择时运行该功能，我已经在下面列出了一个（未经测试的）解决方案。

function selectAnswer(radio_name){ 
    val = $("input[name='" + radio_name + "']").val(); 
    //Do what you will 
} 

$("#submitbutton").bind("click", function(){ selectAnswer("radio2") });

来源

2011-10-24 17:48:17 Whetstone

此解决方案将导致在用户单击单选按钮时触发更改操作，但只有在按下提交按钮后才会触发更改操作。另外，如果多次按下提交按钮，则会导致多次执行该操作。 –

我想你可能会错在这里，我只绑定到单选按钮（例如http://jsfiddle.net/cDanq/1/） – Whetstone

是的，理解。但我的观点是，在原始文章中，处理程序直到点击才添加。你是否建议改变呢？从你的回答中不清楚。 –

var selectAnswer = function(){   
    var answer = $("input[name='radio2']:checked").val(); 
    if(answer=='correct2') { 
     $("#quiz2").fadeOut(function(){ 
      $("#correct2").fadeIn();    
      }); 
     $("#wrong1a").hide(); 
     } 
    if(answer=='wrong1a') { 
     $("#quiz2").fadeOut(function(){ 
      $("#wrong1a").fadeIn(); } 
     )}; 

    if(answer=='wrong2a') { 
     $("#quiz2").fadeOut(function(){ 
      $("#wrong2a").fadeIn(); } 
      )}; 

    if(answer=='wrong4a') { 
     $("#quiz2").fadeOut(function(){ 
      $("#wrong4a").fadeIn(); 
     }); 

     $("#correct2").hide(); 

     } 
     });//end of of selectAnswer 
}

来源

2011-10-24 17:53:25

试试这个（演示here）：

$("#submitButton2").click(function(){ //I would just add a click handler to the submit button 
     var answer = $("input:checked").val(); //this finds the value of the selected radio button 
console.log(answer); 
    if(answer=='correct2') { 
     $("#quiz2").fadeOut(function(){ 
      $("#correct2").fadeIn();    
      }); 
     $("#wrong1a").hide(); 
     } 
    if(answer=='wrong1a') { 
     $("#quiz2").fadeOut(function(){ 
      $("#wrong1a").fadeIn(); } 
     )}; 

    if(answer=='wrong2a') { 
     $("#quiz2").fadeOut(function(){ 
      $("#wrong2a").fadeIn(); } 
      )}; 

    if(answer=='wrong4a') { 
     $("#quiz2").fadeOut(function(){ 
      $("#wrong4a").fadeIn(); 
     }); 
     $("#correct2").hide(); 
     } 
     event.preventDefault(); 
    }); 
$('#reset').click(function(){ 
    $('#quiz2').show(); 
    $('#answers div').hide();  
});

来源

2011-10-24 17:56:20 bozdoz

这不起作用。出于某种原因，它甚至没有显示console.log中的答案。我确实喜欢在提交按钮上放置事件的想法。 – latoyale

你可以看到演示虽然工作。 – bozdoz

删除.click，但仍然附加功能的输入 - 测验淡出输入

回答

相关问题