Создается только первое динамически генерируемое поле выбора

0

На мой взгляд, у меня есть следующий код:

<% @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 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 но я не могу понять, что это такое.

  • 0
    Проблема в методе index() . $(this).index() всегда будет возвращать 0. Если бы вы могли сказать мне, к какому событию вы добавляете этот код, тогда я могу помочь вам с уровнем кода. :)
  • 0
    Я обновлю свой пост, но то, что вы сказали, не соответствует действительности;) alert($(this).index()); возвращает 0 , 1 или 2 зависимости от того, какой флажок я проверяю
Показать ещё 4 комментария
Теги:
ruby-on-rails-3

3 ответа

1
Лучший ответ

Проблема, похоже, .index() с использованием метода .index(). Если метод вызывается без какого-либо аргумента, он возвращает целое число, т.е. позицию элемента, основанную на братьях и сестрах. Так что как-то в этом случае $(this).index() возвращает 0. Итак, я предложил использовать другой вариант того же метода

Заменить эту строку

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

с

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

Теперь он вернет индекс или позицию текущего элемента на основе всех элементов, сопоставленных с селектором $('.show-tabs.show-tab').

Поделиться
1

Я думаю, это из-за использования подчеркивания (_) в id и классе. Это то, что я нашел. Возможно, это будет полезно.

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

Поделиться
  • 0
    Интересно, не знал историю этого. Спасибо!
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') элементов. Больше объяснений здесь

Поделиться
  • 0
    Я думаю, вы правы, что div .game_hide не работает должным образом, но это не сработало. Спасибо за Ваш ответ
  • 0
    Я обновил свой ответ, чтобы показать, как работает .index() . (не правильно, потому что я не знаю, что такое $(this) !
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню