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

Question

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

<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() 并且您需要查找所选选项的文本:

 $(document).ready(function() {

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

.bind() 已弃用

FIDDLE