JQuery如何隐藏/显示所有具有唯一id的div的动态数量

Question

我不太擅长 JQuery，但我正在努力学习。我正在根据数据库中定义的“事件”数量来呈现“里程碑”数字字段的数量。因此，对于 2 个事件，将有 2 个数字字段。我遇到的麻烦是隐藏所有字段，并且仅根据“事件”选择字段中的选择显示一个。这是sn-ps的代码：

<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();
    })
})

我知道我必须捕获所有 div，但我不知道如何诚实...您不能将 ruby​​ 参数传递给 JQuery...将它们全部隐藏，从事件选择器中捕获文本并仅显示一个 id 匹配的内容在选择器中选择..

更新

工作代码： 除了我将 div 的类设置为“wipe”之外，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 是唯一的，所以你需要使用 Classes

$("div."+selected)

您可以使用此代码

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

你可以查看演示

DEMO