使用 HTML/CSS/JS 在 Rails 应用程序中过滤元素

Question

after following w3schools instructions for creating a HTML/CSS/JS filter: https://www.w3schools.com/howto/howto_js_filter_elements.asp

no items initially show up. I think it is only until the btns[i].addEventListener("click", function() { is triggered that the filtering begins to work. I assume it has something do with how JavaScript is executed within a Rails Application or JavaScript in general because I am lacking enough experience in this area.

Thank You in advance for your help!

Here is the code I currently am using:

application.js

// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/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. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//

//= require jquery
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require rrt
//= require_tree .


filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = "";
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

// Show filtered elements
function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

// Hide elements that are not selected
function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current control button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

index.html.erb where my filter is displayed to the user

  <% if logged_in? %>
  <% content_for :actions do %>
    <%= link_to "/admin/portfolio_item/new", class: 'btn btn-primary btn-large pull-right' do %>
      <%= fa_icon_tag "plus" %> Referenz anlegen
      <% end %>
      <% end %>
      <% end %>

      <div align="center" id="myBtnContainer">
         <button class="btn active" onclick="filterSelection('all')"> Alle</button>
         <button class="btn" onclick="filterSelection('wohnen')"> Wohnen</button>
         <button class="btn" onclick="filterSelection('kultur')"> Kultur</button>
         <button class="btn" onclick="filterSelection('gewerbe')"> Gewerbe</button>
         <button class="btn" onclick="filterSelection('verwaltung')"> Verwaltung</button>
      </div>
      <br/>

      <div class="container">
        <div class="row">
            <% @portfolio_items.each do |portfolio_item| %>
              <div class="portfolio_item col-12 col-md-4 filterDiv <%= portfolio_item.category_filter %>">
                <%= image_tag(portfolio_item.image_url(:blog_list), :class => 'py-3', :width => '300', :height => '200') %>

                <h4><%= link_to portfolio_item.main_title, portfolio_item_path(portfolio_item) %></h4>
                <p><%= portfolio_item.main_subtitle %></br><b> <%= portfolio_item.job_type %></b></p>
              </div>
              <% end %>



        </div>
      </div>

my_rrt_overrides.scss # I'm using Rapid Rails Themes, this is the recommend place for custom css.

.container {
  overflow: hidden;
}

.filterDiv {
  display: none; /* Hidden by default */
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

Answer 1

Thanks to John McDowell from kiso.io...

in a new file custom.js and removing require_tree from application.js, because I am using turbolinks filterSelection("all") needed to be wrapped like this...

$(document).on('turbolinks:load', function() {
  filterSelection("all")
})


function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = "";
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

// Show filtered elements
function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

// Hide elements that are not selected
function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current control button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}