在 Rails 应用程序中使用 javascript 实现显示/隐藏功能

Question

实际上，我想在我的 rails 应用程序中执行 javascript 代码。

我在“app/assets/javascripts”中创建了 custom.js 新文件。

custom.js

$( document ).ready(function() {
    $("div#test").hide();
    $("a").click(function(event) {
        event.preventDefault();
        $("div#test").fadeToggle();
    });
});

我还添加了，//= 在 application.js 文件中需要自定义，但代码并没有从一开始就隐藏。

应用程序.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require nicetitle
//= require custom

index.html.erb

<a href="#" class="toggle-formed" style="float: right;" >Search</a>

                <div id="sample" class="<%= @xvaziris_data.present? ? 'hidden' : '' %>">

                    <%= form_tag xvaziris_path, method: 'get', class: "form-group", role: "search" do %>
                    <p>
                        <center><%= text_field_tag :search, params[:search], placeholder: "Search for.....", class: "form-control-search" %>
                            <%= submit_tag "Search", name: nil, class: "btn btn-md btn-primary" %></center>
                        </p>
                        <% end %><br>

                        <% if @xvaziris.empty? %>

                        <center><p><em>No results found for.</em></p></center>              

                        <% end %>

                    </div>

general.scss

.hidden {
  display: none;
}

上面的 custom.js 代码，当我将 index.html.erb 放在 javascript 脚本标记下时，它可以正常工作。但我不想在所有其他控制器/索引中重复自己，因为导轨遵循 DRY 原则，即不要重复自己。

搜索.js

$(document).on('page:change', function () {
        $("div#sample").hide();

    //    | === HERE
    $("a.toggle-formed").click(function(event) {
        event.preventDefault();
        $("div#sample").fadeToggle();
    });
});

欢迎提出任何建议。

提前谢谢你。

Answer 1

而不是在准备好的文档上隐藏 div。您可以将 display: none; 与 css 一起使用。然后，当您的文档加载时，fadeToggle() 仍然可以使用它。

你也应该考虑使用

$(document).on('page:change', function () {

因为涡轮链接。有时，turbolink 会在不加载页面的情况下更改页面，并且不会调用准备好的文档。

Answer 2

向@Joe's answer添加更多内容：

因此，当您需要实现搜索时，您可以这样做：

在你的css中添加一个类hidden类写：

.hidden {
  display: none;
}

所以当页面加载时检查搜索数据是否存在然后不要添加类hidden 或者添加它。示例：

<div id="test" class="<%= search_data.present? ? 'hidden' : '' %>">

所以这会在搜索数据存在时显示出来。

希望这会有所帮助。