jQuery запускать все экземпляры на вложенной форме rails cocoon

Question

У меня есть форма со следующими вложенными полями, использующими cacoon

I have default fields and a conditional to show more fields if an option is selected ie. Rocket League like so

However, as you can see from the screenshot only one instance of a tournament standing is actually switching fields.

So my question is, how do I make every instance change?

Here is my code:

$(document).on("change", ".ts_select", function(event) {
  if (this.value == '1') {
    $('#default-fields').hide()
    $('#rocket-fields').show()
  } else {
    $('#default-fields').show()
    $('#rocket-fields').hide()
  }
})

 <% = render partial: "Tournament / fpartials / default", Tournament: @tournament, местные жители: {f: f}%>  <% = render partial: "Tournament / fpartials / rocket_league_fields", Tournament: @tournament, locals: {f: f}%>  

Answer 1

Селектор jQuery, который вы используете, выбирает первый соответствующий элемент HTML. Итак, в вашем случае вы выбираете первые div s с идентификаторами 'default-fields' и 'rocket-fields'.

Предполагая, что все поля вашей команды просто заключены в div с этими ID, вы можете использовать другой селектор, чтобы найти все экземпляры:

$("[id='default-fields']").hide();
$("[id='default-fields']").show();

Ознакомьтесь с jQuery документацией , если вы хотите узнать больше о том, как селекторы работа.

Answer 2

В html у вас есть id, и они должны быть уникальными и присутствовать только один раз на странице, и у вас есть classes. В вашем случае, похоже, вы используете id для повторяющихся элементов.

Хотя это может работать визуально, при публикации формы вы столкнетесь с проблемами (поскольку при сборе данных формы только предполагаемые уникальные элементы собраны).

Таким образом, лучшее решение - использовать вместо них классы и соответствующим образом адаптировать код.

$(document).on("change", ".ts_select", function(event) {
  if (this.value == '1') {
    $('.default-fields').hide()
    $('.rocket-fields').show()
  } else {
    $('.default-fields').show()
    $('.rocket-fields').hide()
  }
})