0

I have the following code in my view:

<% @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 %>

Which generates the following 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>

and is placed with the following 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();
    }
  }
} );

Everything is "there" - in that I can find it on the page with developer tools in Chrome, but the select box is only being displayed for the first game (game_0) - Because of this, I think there's some sort of issue with the id's but I can't figure out what it is.

4

3 回答 3

1

我认为这是因为在 id 和 class 中使用了下划线 (_)。这就是我发现的。可能有点用。

https://developer.mozilla.org/en/docs/Underscores_in_class_and_ID_Names

于 2013-10-23T13:06:34.803 回答
1

问题似乎与.index()方法的使用有关。如果在没有任何参数的情况下调用该方法，那么它将返回一个整数，即基于兄弟元素的元素的位置。所以在这种情况下以某种方式$(this).index()返回 0。所以，我建议使用同一方法的不同变体

替换此行

$(".game-"+ $(this).index()).show();

和

$(".game-"+ $('.show-tabs .show-tab').index($(this))).show();

现在，它将根据与$('.show-tabs .show-tab')选择器匹配的所有元素返回当前元素的索引或位置。

于 2013-10-23T14:20:15.373 回答
0

首先，您在 jQUERY 中有一个错误。你隐藏div，但你试图显示select元素。将其更改为：

//if this thing happens
//hides all game divs
$(".game-hide").hide();
//shows the game div for the selected game with good index method
$(".game-"+ $('.show-tabs .show-tab').index($(this))).parent('.game-hide').show();

解释 ：

与$(this)相关$('.show-tabs .show-tab').live('click'。这是您单击的当前选项卡。因此，要检索索引，$(this)您必须与所有$('.show-tabs .show-tab')元素进行比较。更多解释在这里

于 2013-10-23T13:03:09.007 回答