如何重構jQuery代碼中的這些回調？

的代碼如下所示：如何重構jQuery代碼中的這些回調？

<label>radio 1 </label> 
<input type="radio" onchange="$('input2').show()" id="radio1" name="RadioGroup"> 
<label>radio 2 </label> 
<input type="radio" onchange="$('input2').show()" id="radio2" name="RadioGroup"> 
<label>radio 3 </label> 
<input type="radio" onchange="$('input2').hide()" id="radio3" name="RadioGroup"> 

<input type="text" id="input2">

有可能是這些代碼的兩個缺點：已經被寫入了onchange

jQuery的代碼三次
的onchange代碼纔會執行當我點擊/更改其中radio。換句話說，當頁面被初始化時，將會執行這些代碼而不是。例如，如果在頁面初始化的radio3被選中，input2仍將顯示..

來源

2012-11-19 Hanfei Sun

使用內聯jQuery必須是某種形式的褻瀆。您應該使用不顯眼的JavaScript –

對於＃2，您想要將邏輯提取到具有自定義事件的邏輯或處理程序的聲明函數中。然後，您可以調用該函數或在頁面加載時觸發事件。同時考慮1和2，你可能會把所有的信息放在同一個函數中。給無線電相同的名稱和輸入相同的類。獲取無線電元件的值，隱藏除了適用於選定無線電的那個類別以外的所有輸入。 –

@MattWhipple不明白'onchange'的瀏覽器會忽略它，所以這已經不顯眼了;這是否是好的做法是另一回事。 –

我做了一個快速的jsfiddle是整理這一點。

1）分配一個類的任何顯示輸入 2）分配另一個類來隱藏了輸入 3）在一個單獨的JS文件附加在了jQuery的document.ready事件任何單選按鈕單選按鈕的管理這些行爲。

小提琴：http://jsfiddle.net/Kw4gu/2/

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<label>radio 1 </label> 
<input type="radio" class="open" name="radioGroup" id="radio1"> 
<label>radio 2 </label> 
<input type="radio" class="open" name="radioGroup" id="radio2"> 
<label>radio 3 </label> 
<input type="radio" class="close" name="radioGroup" id="radio3"> 

<input type="text" id="input2">

$(document).ready(function() { 
    $(".open").on("change", function(event) { 

     $('#input2').show(); 
    }); 

    $(".close").on("change", function(event) { 

     $('#input2').hide(); 
    }); 
});

來源

2012-11-19 03:51:00 m4nw17h4pl4n

不要使用「live」 - 它在jQuery中已被棄用。改爲使用「開」。 – JasCav

感謝，編輯，使用於：D – m4nw17h4pl4n

有一件事你可以做的是通過JavaScript設置的事件處理程序，而不是像該HTML他們捆綁。使用jquery選擇器來選擇單選按鈕，然後將這些事件添加到一個地方。

通過JavaScript做的事情也給你就當初始化代碼，您如何運行的東西更多的靈活性等

來源

2012-11-19 03:15:29 hugomg

你可以這樣做一對夫婦不同的方式，但它在jQuery的非常簡單。我已經更新了一下你的HTML（給了兩個類似的按鈕一個普通的類，以方便選擇，並且我給所有的按鈕設置了相同的名稱，所以它們是同一個按鈕組的一部分）。

<label>radio 1 </label> 
<input type="radio" class="radioButton" id="radio1" name="buttonGroup"> 
<label>radio 2 </label> 
<input type="radio" class="radioButton" id="radio2" name="buttonGroup"> 
<label>radio 3 </label> 
<input type="radio" id="radio3" name="buttonGroup"> 

<input type="text" id="input2">

現在，您必須編寫選擇器來隱藏或顯示取決於所選按鈕的字段。此處顯示：

$(function() { 
    $('#input2').hide(); 

    $('.radioButton').on('change', function() { 
     $('#input2').show(); 
    }); 
    $('#radio3').on('change', function() { 
     $('#input2').hide(); 
    }); 
});

注意，我開始了內$('#input2').hide();只是最初隱藏它，但我會做這樣的事情在CSS正常。

在任何情況下，您都可以在this jsFiddle example上看到此示例。

來源

2012-11-19 04:02:44 JasCav

如何重構jQuery代碼中的這些回調？

回答

相關問題