【发布时间】:2016-12-29 10:49:26
【问题描述】:
我有以下脚本,它通过 Rails 中的 AJAX 执行并使用 ERB 模板:
问题
似乎只有第一个指定的选项(取消选中)适用于开关和复选框,else 语句中的部分不起作用!
<% if params[:type] == "switch" %>
var obj = $('.<%= params[:name] %> a:not(.label) #myonoffswitch:checkbox');
<% if params[params[:name]] %> // WORKS
$('.<%= params[:name] %> a:not(.label)').attr("href", "/update?name=abc&abc=true&type=switch"); // Changes link to check on next click
obj.prop('checked', false); // Unchecks switch
<% else %> // DOES NOT WORK
$('.<%= params[:name] %> a:not(.label)').attr("href", "/update?name=abc&abc=false&type=switch"); // Changes link to uncheck on next click
obj.prop('checked', true); // Checks switch
<% end %>
<% elsif params[:type] == "checkbox" %>
<% if params[params[:name]] %> // WORKS
$('.<%= params[:name] %> a:not(.label)').remove(); // Removes checked checkbox
$('.<%= params[:name] %>').prepend("<a data-remote='true' href='/update?name=<%= params[:name] %>&<%= params[:name] %>=true&type=checkbox'><i class='icon ion-android-checkbox-outline-blank' tabindex='0'></i></a>"); // Changes link to check on next click & Adds unchecked checkbox
<% else %> // DOES NOT WORK
$('.<%= params[:name] %> a:not(.label)').remove(); // Removes unchecked checkbox
$('.<%= params[:name] %>').prepend("<a data-remote='true' href='/update?name=<%= params[:name] %>&<%= params[:name] %>=false&type=checkbox'><i class='icon ion-android-checkbox' tabindex='0'></i></a>"); // Changes link to uncheck on next click & Adds checked checkbox
<% end %>
$('.<%= params[:name] %> a:not(.label) i').focus(); // Focuses on checkbox
<% end %>
DOM
<div class="name flex">
<a data-remote="true" href="/update?name=abc&abc=false&type=switch"><div class="onoffswitch">
<input checked="" class="onoffswitch-checkbox" id="myonoffswitch" name="onoffswitch" type="checkbox">
<label class="onoffswitch-label" for="myonoffswitch"></label>
</div>
</a>
<div class="label">
<a class="abc label" data-remote="true" href="/update?name=abc&abc=false&type=switch">ABC
</a>
<p class="abc labeltext">Lorem ipsum.</p>
</div>
</div>
<div class="name1 flex"><a data-remote="true" href="/update?name=name1&name1=true&type=checkbox">
<i class="icon ion-android-checkbox-outline-blank" tabindex="0"></i></a>
<div class="label">
<a class="abc label" data-remote="true" href="/update?name=name1&name1=false&type=checkbox">ABC
</a>
<p class="abc labeltext">Lorem ipsum.</p>
</div>
</div>
但是,我注意到只有选中复选框或开关时才会取消选中,如果未选中则不会更改其外观(DOM)。
我做错了什么?
【问题讨论】:
-
您能否在上面的代码块中添加注释并解释所需的结果?这条线也不清楚
option (unchecking) works for switches and checkboxes works。params[:name]的值是多少? -
我对给定的代码进行了广泛的注释。正如您现在所看到的,只有取消选中开关或复选框的过程才有效。
params[:name]等于我要更新的属性 (abc)。所以如果params[:name] = "abc"->params[params[:name]] = # value of abc -> true / false -
您是否尝试过在 if 条件之前使用 puts 打印 params[params[:name]]?
if params[params[:name]]的结果将始终为布尔值 true,因为您的 if 条件检查变量是否存在。所以把条件改成if params[params[:name]] == "false"。 -
我将该行放入我的代码中:
$('body').append('<p><%= params[params[:name]] %></p>');并且我得到了适当的值(true/false)有趣的是,执行的 JS 不包含应该执行的操作在我检查了该值是true还是false之后。我还尝试专门检查if params[params[:name]] == true和elsif params[params[:name]] == false- 它也不起作用。 -
它是
if params[params[:name]] == "false"而不是if params[params[:name]] == false,因为所有内容都是url 中的字符串。
标签: jquery ruby-on-rails ruby parameters ruby-on-rails-5