單選按鈕單擊事件

Question

在我的代碼中，我想創建一個包含3個可能答案的問題。 用戶單擊其中之一。 然后問題消失了。 我的問題是問題在用戶單擊之前在加載時消失了。
PS：我是編程和JavaScript的新手，所以請盡量簡化答案。
先感謝您。 :)

 $("input:radio").attr("checked", false); function disappear(a) { $("#q" + a).fadeOut(1500); } $(".choice1").click(disappear(1)); 

 <form id="q1"> 58*2= <br> <input type="radio" class="choice1" name="a1" value="1" />128 <input type="radio" class="choice1" id="r1" name="a1" value="2" />116 <input type="radio" class="choice1" name="a1" value="3" />126 </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

Answer 1

問題出在您的點擊處理程序上。

$(".choice1").click(disappear(1));

上面的調用使函數在加載時disappear ，因為您沒有將函數的引用作為回調傳遞。

為處理程序編寫有效的匿名回調

$(".choice1").click(function(){
    disappear(1)
});

附帶一提，您可以在如下所示的處理程序中傳遞函數引用，因為它是無參數的。 否則，您將需要如上所述的匿名函數包裝。

    $(".choice1").click(disappear);

Answer 2

您實際上是在觸發click事件，而不是創建事件處理程序。

$(".choice1").click(disappear(1));

觸發click事件，不將其綁定到類。

這是將click綁定到類的方式：-

$("input:radio").attr("checked", false);

function disappear(a) {
  $("#q" + a).fadeOut(1500);
}

$(".choice1").click(function(){
    disappear(1);
});

Answer 3

您應該改用'change'事件，因為只有更改單選按鈕時才會觸發

 $("input:radio").attr("checked", false); function disappear(a) { $("#q" + a).fadeOut(1500); } $(".choice1").on('change', function(){ disappear(1); }); 

 <form id="q1"> 58*2= <br> <input type="radio" class="choice1" name="a1" value="1" />128 <input type="radio" class="choice1" id="r1" name="a1" value="2" />116 <input type="radio" class="choice1" name="a1" value="3" />126 </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

Answer 4

或者，由於會有很多問題，您可以

$("input:radio").attr("checked", false)
                .click(function(){$(this).parent('form').fadeOut(1500);})

寫得更少，做更多...，請看這里： http : //jsfiddle.net/wm9gdr2n/1/

單擊功能將找到需要使用parent()淡入的相關<form> 。 如果您的復選框包裝在<form> <div>內的某些<div> ，則您將不得不使用parents() ，因為parent()僅會找到直接父級（ <div> ）。

這樣您就不必寫

$(".choice1").click(function(){disappear(1)});
$(".choice2").click(function(){disappear(2)});
$(".choice3").click(function(){disappear(3)});
...

每個問題。 disappear(a)已過時。

（如果您的頁面上有不希望這種機制發生的復選框，則可能必須在選擇器中包含更多詳細信息。）

Answer 5

您已經觸發了click事件，而不是定義了回調。 您需要的一種可能方法是：

 $("input:radio").attr("checked", false); $(".choice1").click(function() { var me = $(this), index = me.attr('name').substring(1); $('#q' + index).fadeOut(1500); }); 

 <form id="q1"> 58*2= <br /> <input type="radio" class="choice1" name="a1" value="1" />128 <input type="radio" class="choice1" id="r1" name="a1" value="2" />116 <input type="radio" class="choice1" name="a1" value="3" />126 </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

上面代碼的主要變化是從單選框的“名稱”中讀取索引。 這是為了避免從參數傳遞類似“ 1”的索引。