如何使用jquery以編程方式檢索屬性以優化我的事件處理程序？

Question

我使用.on（）方法根據哪個標籤被點擊來顯示/隱藏內容;並指出當前檢查哪個無線電。

我希望我的代碼能夠編程，以便標籤的數據類型和輸入的值是動態的而不是硬編碼的。

什麼是最好的方法？

$('.js-choice[data-type="skip"]').on('click', function() { 
    $('input[name="choice"][value="1"]').prop('checked', true); 
    $(jsSkip).removeClass('hide-content'); 
    $(jsAddr).addClass('hide-content'); 
    $(jsNew).addClass('hide-content'); 
}); 

這裏是我的jsfiddle鏈接：http://jsfiddle.net/curlybraces/x8Qbz/2/

Answer 1

在你的小提琴，你使用了大量的類，但沒有任何標識。首先將標籤的id與data-type類似的標籤給予三個<div>。還要在div中添加一個類，將它們標識爲表單域的容器。他們有共同之處。

在JavaScript，你現在需要做的是選擇<label> s，這有類js-choice。對他們每個人，你都應用一個onClick處理程序。該處理程序只需隱藏所有具有表單字段的<div>，並顯示屬於被單擊的<label>的那個。

這給我們留下了這個簡單的功能：

$('.js-choice').each(function() { 
    $(this).on('click', function() { 
     $('.form-fields').addClass('hide-content'); 
     $('#fields-' + $(this).attr('data-type')).removeClass('hide-content'); 
    }); 
}); 

我已經updated your jsFiddle。