我有一個窗體有很多選擇輸入按主題分組。我爲每個組選擇了一個主選擇，允許用戶將組中的所有選擇設置爲主值（gradescales是提供1-8級的方法）。DRY向上jquery函數

我怎麼能幹這個呢？

FORM

<label>Change all to:</label> 
<%= select_tag "section_one", options_for_select(gradescales), :id => "section_one_master" %> 

    <div id="section_one_wrapper"> 
     <%= f.input :item_one, :collection => gradescales %> 
     <%= f.input :item_two, :collection => gradescales %> 
     <%= f.input :item_three, :collection => gradescales %> 
     <%= f.input :item_four, :collection => gradescales %> 
    </div>

jQuery函數如下所示：

$("#section_one_master").change(function() { 
    var a = $("#section_one_master").val(); 
    $("#section_one_wrapper select").val(a); 
}); 

$("#section_two_master").change(function() { 
    var a = $("#section_two_master").val(); 
    $("#section_two_wrapper select").val(a); 
});  

...again, and again

所以，當section_one_master改變時，功能被擊中，所有的section_one_wrapper DIV中的選擇輸入更改以匹配任何值被選爲主人。

我有很多組，每個組都有一個主選擇輸入。我怎麼能幹這一個功能，然後動態地標識調用函數的主，並使用約定來改變適當的分組選擇？

來源

2013-01-04 hellion

使用類而不是id的。 – Blazemonger

您可以添加類的主控部分元素：

$(".section-masters").change(function() { 
    var id = this.id.replace('master', 'wrapper'); 
    $('#' + id + " select").val(this.value); 
});

注意，在改變處理程序的上下文this指元素，您不必重新選擇的元素。

您也可以選擇部分包裝元素和緩存的對象，並使用filter方法，通過緩存的對象，你只能選擇這些元素一次，這比重新選擇他們更好。

var $wrappers = $('.section-wrappers'); 
//... 
$wrappers.filter('[id="' + id + '"]').val(this.value);

來源

2013-01-04 01:27:24 undefined

是的，因爲@Blazemonger說，你可以使用一個類，它會幫助很多

但你也可以做到這一點

var foos = ['one', 'two']; 

$.each(foos, function(index, elem){ 
    var $selector = $("#section_" + elem + "_master"); 
    $selector.change(function() { 
    var a = $selector.val(); 
    $("#section_" + elem + "_wrapper select").val(a); 
    }); 
});

，但完全！如果你能用班級做到這一點！

來源

2013-01-04 01:29:11

我最終爲每個主人添加了一個類和一個ID，並將每個部分包裹在一個ID中。然後在我的咖啡腳本：

$(".master_change").change -> $("div##{@.id}_section select").val $(@).val()

的腳本觸發任何.master_change，從「這個」被加入到「_section」，這抓住了這部分包裝選擇抓住ID ...和那麼當然會改變它們的所有值以匹配主人。 12行到一行！

來源

2013-01-17 01:32:54 hellion

DRY向上jquery函數

FORM

jQuery函數如下所示：

回答

相關問題