在我看来有以下代码:
<% @games.each_with_index do |game, i| %>
<div class="game_<%= i %> game_hide hide" >
<% options = options_from_collection_for_select(Player.where("game_id = ?", game.id), 'id', 'handle' ) %>
<%= f.select(:player_ids, options, {:include_blank => true}, {id: "game_#{i}", :multiple => true} ) %>
</div>
<% end %>
生成以下 html:
<div class="add-players">
<div class="game_0 game_hide hide" >
<input name="team[team_divisions_attributes][0][player_ids][]" type="hidden" value="" />
<select id="game_0" multiple="multiple" name="team[team_divisions_attributes][0][player_ids][]"><option value=""></option>
<option value="2551">Näryt</option>
<option value="2552">BrTT</option>
<option value="2553">Danagorn</option>
...
</select>
</div>
<div class="game_1 game_hide hide" >
<input name="team[team_divisions_attributes][0][player_ids][]" type="hidden" value="" />
<select id="game_1" multiple="multiple" name="team[team_divisions_attributes][0][player_ids][]"><option value=""></option>
<option value="4885">Zium</option>
<option value="4886">Abver</option>
<option value="4887">Xenocider</option>
...
</select>
</div>
<div class="game_2 game_hide hide" >
<input name="team[team_divisions_attributes][0][player_ids][]" type="hidden" value="" />
<select id="game_2" multiple="multiple" name="team[team_divisions_attributes][0][player_ids][]"><option value=""></option>
<option value="4865">Odin</option>
<option value="4866">Nazgul</option>
<option value="4867">Dragon</option>
...
</select>
</div>
</div>
并与以下 jQuery 一起放置:
//when box is checked...
$('.show-tabs .show-tab').live('click', function(){
var tab = $('.tabs .tab:nth-of-type(' + ( $(this).index() + 1 ) + ')');
var content = $('.tab-content:nth-of-type(' + ( $(this).index() + 1 ) + ')');
var destroy_field = content.find('input#team_team_divisions_attributes_' + $(this).index() +'__destroy');
if ($(this).find('.checkbox').hasClass('checkBoxed')){
//make it visible
destroy_field.val('0');
//shows the game div for the selected game
$(".game-"+ $(this).index()).show();
//what's the index?
alert($(this).index());
//show the associated tab
tab.show();
tab.click();
} else {
destroy_field.val('1');
tab.hide();
if (tab.hasClass('selected')) {
$('.tabs .tab:visible').first().click();
content.hide();
}
}
} );
一切都“在那里”——因为我可以在 Chrome 中使用开发者工具在页面上找到它,但是选择框只显示在第一个游戏 (game_0
) 中——正因为如此,我认为 id
存在某种问题,但我无法弄清楚它是什么。
最佳答案
问题似乎与 .index()
方法的使用有关。如果在没有任何参数的情况下调用该方法,那么它将返回一个整数,即基于兄弟元素的元素位置。所以在这种情况下,$(this).index()
返回 0。因此,我建议使用同一方法的不同变体
替换这一行
$(".game-"+ $(this).index()).show();
与
$(".game-"+ $('.show-tabs .show-tab').index($(this))).show();
现在,它将根据所有与 $('.show-tabs .show-tab')
选择器匹配的元素返回当前元素的索引或位置。
关于jquery - 仅创建第一个动态生成的选择框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19542403/