JQuery 如何 hide/show div 动态数量的 unique id

Question

我不太擅长JQuery，但我正在努力学习。我根据数据库中定义的 "Events" 数量呈现 "Milestone" 数字字段的数量。因此，对于 2 个事件，将有 2 个数字字段。我遇到的麻烦是隐藏所有字段，只显示一个基于 "Event" select 字段中的 selection 的字段。以下是代码片段：

<div>
<%= f.label "Event" %>
<%= f.select(:event, options_for_select(get_events),{}, { :class => 'form-control', :id => 'event'})%>
<%if any_errors(@attendance_policy, :event) != nil%>
   <%= any_errors(@attendance_policy, :event) %>
<%end%>
</div>
.....
<% Event.all.each do |event| %>
   <div id='<%=event.event_name%>' >
   <%= f.label "Absence Milestone(Make dynamic with selected event)"+event.event_name %>
   <%= f.number_field :absence_milestone, in: 0..event.absence_max.to_i, class: 'form-control' %>
   <%if any_errors(@attendance_policy, :absence_milestone) != nil%>
       <%= any_errors(@attendance_policy, :absence_milestone) %>
   <%end%>          
</div>
<%end%>

这是我在 JQuery 的可怜尝试：

$(document).ready(function() {

    $("select#event").bind("change", function() {
        var selected = $("select#event").text();
        $("div#"+selected).show();
    })
})

我知道我必须捕获所有 divs 但我不知道如何诚实......你不能将 ruby 参数传递给 JQuery...隐藏它们, 从事件 selector 中捕获文本，并且只显示一个 which id 匹配 select 在 selector..

中编辑的内容

更新

工作代码： Ruby 除了我将 div 的 class 设置为“擦除”外，Ruby 部分没有太大变化。

<% Event.all.each do |event| %>
    <div id="<%= event.event_name%>" class="wipe">
    <%= f.label "Absence Milestone" %>
    <%= f.number_field :absence_milestone, in: 0..event.absence_max.to_i, class: 'form-control' %>
    <%if any_errors(@attendance_policy, :absence_milestone) != nil%>
    <%= any_errors(@attendance_policy, :absence_milestone) %>
    <%end%>
    </div>
<%end%>

此处更新jQuery。我在测试时发现了另一个错误，即使我在其中输入了一个值，我的验证器也会抱怨该字段不能为空。背后的原因是所有其他隐藏字段都没有输入任何内容。我更新了 jQuery 以更新在焦点丢失事件中显示的值中键入的所有隐藏字段。

jQuery 工作（可能很乱）：

$(document).ready(function() {
    $("[class='wipe']").hide();
    var selected = $("select#event").find("option:selected").text();
    $("[id='" + selected + "']").show();
    $("[id='" + selected + "']").on('focusout', function() {

        var input = $(this).find("input").val();
        $('input[type=number]').val(input)
    })
    $("select#event").on('change', function() {
        $("[class='wipe']").hide();
        var selected = $(this).find("option:selected").text();
        $("[id='" + selected + "']").show();
        $("[id='" + selected + "']").on('focusout', function() {

            var input = $(this).find("input").val();
            $('input[type=number]').val(input)
        })
    });

Answer 1

你很接近。您应该使用 .change() 而不是 .bind() 并且您需要找到所选 option:

的文本

 $(document).ready(function() {

   $("select#event").change(function() {
      var selected = $(this).find("option:selected").text();
      $("div#"+selected).show();
    })
 })

.bind() 已弃用

FIDDLE

Answer 2

如果我没理解错的话..你不能使用 IDs Id 是唯一的所以你需要使用类

$("div."+selected)

您可以使用此代码

$(document).ready(function() {
 $('div.hidden').hide();    
 $("select#event").on('change',function() {
        var selected = $(this).val();
        $('div.hidden').hide();
        $('div.'+selected).show()
 });
});

你可以查看演示

JQuery 如何 hide/show div 动态数量的 unique id

JQuery How to hide/show dynamic number of divs all with unique id

javascript

jquery

html

forms

ruby-on-rails-4

DEMO