Я пытаюсь, чтобы простая фильтрация правильно отображалась на сайте Wordpress.Карты должны сортироваться, когда пользователь нажимает кнопку, но ничего не происходит.
Ошибка консоли: Uncaught TypeError: Невозможно прочитать свойство 'length' со значением null
Я также попытался загрузить JS-скрипт в тело вместо заголовка, но это, похоже, не решает проблему.Любая помощь будет принята с благодарностью.
filterSelection("all");
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("card");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
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];
}
}
}
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 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";
});
}
// Add active class to the current 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";
});
}
//var $divs = $("div.box");
var $divs = $("a.card");
$('#alphBnt').on('click', function() {
var alphabeticallyOrderedDivs = $divs.sort(function(a, b) {
return $(a).find("p.card-description").text() > $(b).find("p.card-description").text();
});
$("#cards").html(alphabeticallyOrderedDivs);
});
$('#numBnt').on('click', function() {
var numericallyOrderedDivs = $divs.sort(function(a, b) {
return $(a).find("p.card-description").text() < $(b).find("p.card-description").text();
});
$("#cards").html(numericallyOrderedDivs);
});
// $('#numBnt').click(function(){
// alert("The numBnt was clicked");
// });
#banner {
position: relative;
text-align: center;
/*background-image: url("https://www.sevenmiles.com.au/wp-content/uploads/2018/02/cultivar_klow_017-1-1024x684.jpg");*/
background-size: cover;
width: 100%;
min-height: 100vh;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px;
}
.banner-text {
max-width: 1200px;
color: white;
z-index: 99999999;
/* margin-top: 10%;
margin-bottom: 5%;*/
}
.banner-text>*:not(last-child) {
margin-bottom: 25px;
}
.dimmer {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(16, 15, 15, 0.35);
z-index: 1;
}
.sort {
display: none;
}
.img-card {
background-size: cover;
width: 100%;
height: 100%;
}
#cards {
margin-top: 40px;
margin-bottom: 40px;
text-align: center;
}
.card {
position: relative;
width: 100%;
height: 100%;
padding: 0 20px;
margin: 20px;
display: inline-block;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
border-radius: 5px;
background-size: cover;
}
.card:after {
border-radius: 5px;
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba( 16, 15, 15, 0.35);
}
.card:hover {
transform: scale(1.05);
}
.info {
width: 100%;
position: absolute;
top: 50%;
left: 0;
right: 0;
/* margin: auto;*/
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
text-align: center;
z-index: 1;
}
.card-title {
font-size: 1.3em;
line-height: 1.3em;
z-index: 999;
color: white;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
margin-left: 7%;
margin-right: 7%;
}
.card-description {
font-size: 1em;
color: white;
margin: 0;
margin-top: -10px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
}
.card-param-1 {
position: absolute;
font-size: 0.9em;
color: white;
z-index: 2;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
}
.card-param-2 {
position: absolute;
bottom: 0;
right: 20px;
font-size: 0.9em;
color: white;
z-index: 2;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
}
#myBtnContainer {
color: white;
z-index: 5;
bottom: 1em;
width: 100%;
text-align: center;
left: 0;
}
.myBtnContainerBox {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.box {
background: red;
height: 200px;
width: 200px;
display: inline-block;
}
.shumniy-fix {
display: inline-block;
margin-bottom: 70px;
}
@media only screen and (max-width: 1400px) and (min-width: 1200px) {
.cards {
width: 50vh;
}
}
@media only screen and (max-width: 1400px) and (min-width: 1200px) {
.card-param-1 {
margin-top: -1rem;
text-align: center;
}
}
@media only screen and (max-width: 1200px) {
#cards {
margin-left: -20px;
}
}
@media only screen and (min-width: 300px) and (max-width: 1400px) {
.card-param-1 {
position: relative;
margin-top: 250px !important;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="primary" class="page content-area text-center">
<main id="main" class="site-main" role="main">
<div class="entry-content">
<div class="container large">
<div class="row">
<div class="col-xs-12">
<div class="about">
<h1>☕Essential Coffee Terminology☕: Part 1</h1>
<p>Not sure of the difference between a macchiato and flat white? Or want to get an idea of how strong a ristretto is or get a rough idea on average pricing for coffee types, then our glossary is the perfect tool. Use our button filters to
find the perfect coffee for you. Remember to check out our <a href="http://www.sevenmiles.com.au/wholesale-draft-2/?page_id=2645">Coffee.Science.Guru</a> podcast for more insights into what we do at Seven Miles.</p>
<div id="myBtnContainer">
<div class="myBtnContainerBox"><button class="btn active" onclick="filterSelection('all')"> all</button><button class="btn" onclick="filterSelection('☕Weak')">☕Weak</button><button class="btn" onclick="filterSelection('☕Strong')">☕Strong</button><button class="btn"
onclick="filterSelection('?Milk')">?Milk</button><button class="btn" onclick="filterSelection('? Less than $3')">? Less than $3</button><button class="btn" onclick="filterSelection('? More than $3')">? More than $3</button>
</div>
<!-- <div class="sort">
<button id="alphBnt" class="btn">Rating +</button><button id="numBnt" class="btn">Rating -</button>
</div> -->
<div>
<div id="cards">
<a target="" href="" class="card ☕Strong, ? Less than $3" data-blink-id="jmyg2mqkriv73483wxtn" style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url("https://assets.blinkloader.com/3287797048/211854390_long_black_2-450.webp"); padding: 100px;">
<p class="card-param-1">☕Strong, ? Less than $3</p>
<p class="card-param-2">4.5</p>
<div class="info">
<h2 class="card-title">Americano</h2>
<p class="card-description">A type of coffee drink made by diluting espresso with hot water. Strength depends on whether a single or double shot used</p>
</div>
</a>
<a target="_blank" href="" class="card ☕Weak, ?Milk, ? More than $3" data-blink-id="78n19hmjb73w4fnlocvonk" style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url("https://assets.blinkloader.com/3287797048/2958086502_capuccino-450.webp"); padding: 100px;">
<p class="card-param-1">☕Weak, ?Milk, ? More than $3</p>
<p class="card-param-2">3.5</p>
<div class="info">
<h2 class="card-title">Capuccino</h2>
<p class="card-description">Originating from Italy, this highly popular drink is made by preparing a double espresso shot with steamed foam milk</p>
</div>
</a>
<a target="_blank" href="http://www.sevenmiles.com.au/1548844234421/commercial-espresso-machine-guide/" class="card ☕Strong, ? Less than $3" data-blink-id="1854wdj6up40g6684je19a" style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url("https://assets.blinkloader.com/3287797048/4201216001_espresso-450.webp"); padding: 100px;">
<p class="card-param-1">☕Strong, ? Less than $3</p>
<p class="card-param-2">4.8</p>
<div class="info">
<h2 class="card-title">Espresso</h2>
<p class="card-description">Coffee which has been brewed by forcing out a small amount of near boiling water under pressure through finely ground coffee beans. More info on espresso and machinery</p>
</div>
</a>
<a target="_blank" href="" class="card ☕Weak, ?Milk, ? More than $3" data-blink-id="7upbokyel4rjb3azerer9e" style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url("https://assets.blinkloader.com/3287797048/776881994_flat_white-450.webp"); padding: 100px;">
<p class="card-param-1">☕Weak, ?Milk, ? More than $3</p>
<p class="card-param-2">4</p>
<div class="info">
<h2 class="card-title">Flat white</h2>
<p class="card-description">Similar to a latte but with less froth and milk. A flat white is made with an espresso shot and hot steamed milk</p>
</div>
</a>
<a target="_blank" href="" class="card ☕Weak, ?Milk, ? More than $3" data-blink-id="zgt2liyn0ogwlcyncagxz9" style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url("https://assets.blinkloader.com/3287797048/3835623407_latte-450.webp"); padding: 100px;">
<p class="card-param-1">☕Weak, ?Milk, ? More than $3</p>
<p class="card-param-2">4</p>
<div class="info">
<h2 class="card-title">Latte</h2>
<p class="card-description">Espresso with steamed milk. It differs from a flat white as it has more milk and froth</p>
</div>
</a>
<a target="_blank" href="" class="card ☕Strong, ? Less than $3" data-blink-id="kcblh9pmit0pyzvr2886le" style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url("https://assets.blinkloader.com/3287797048/1609955235_long_black-1300.webp"); padding: 100px;">
<p class="card-param-1">☕Strong, ? Less than $3</p>
<p class="card-param-2">4.5</p>
<div class="info">
<h2 class="card-title">Long black</h2>
<p class="card-description">Similar to an Americano, it is made by pouring espresso or ristretto over hot water. A long black retains the crema and is less voluminous in comparison to an Americano
</p>
</div>
</a>
<a target="_blank" href="" class="card ☕Weak, ?Milk, ? More than $3" data-blink-id="349m4t9g8nz1146u3906vs" style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url("https://assets.blinkloader.com/3287797048/1043325355_long_macchiato-450.webp"); padding: 100px;">
<p class="card-param-1">☕Weak, ?Milk, ? More than $3</p>
<p class="card-param-2">4</p>
<div class="info">
<h2 class="card-title">Long macchiato</h2>
<p class="card-description">A long black with a bit of milk foam on top</p>
</div>
</a>
<a target="_blank" href="" class="card ☕Weak, ?Milk, ? More than $3" data-blink-id="03sxdg5h41d532qja5a8nuk" style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url("https://assets.blinkloader.com/3287797048/3311636326_macchiato-450.webp"); padding: 100px;">
<p class="card-param-1">☕Weak, ?Milk, ? More than $3</p>
<p class="card-param-2">4</p>
<div class="info">
<h2 class="card-title">Macchiato</h2>
<p class="card-description">It is an espresso coffee drink with a small amount of milk, usually foamed</p>
</div>
</a>
<a target="_blank" href="" class="card ☕Weak, ?Milk, ? More than $3" data-blink-id="kliwm3yt40de5sncz3clb5" style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url("https://assets.blinkloader.com/3287797048/1343261913_mocha-450.webp"); padding: 100px;">
<p class="card-param-1">☕Weak, ?Milk, ? More than $3</p>
<p class="card-param-2">4</p>
<div class="info">
<h2 class="card-title">Mocha</h2>
<p class="card-description">Also known as a mocaccino, is a chocolate variant of a latte </p>
</div>
</a>
<a target="_blank" href="" class="card ☕Weak, ?Milk, ? Less than $3" data-blink-id="4xeeh73jzoatrdrsanewgd" style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url("https://assets.blinkloader.com/3287797048/607585184_piccolo2-450.webp"); padding: 100px;">
<p class="card-param-1">☕Weak, ?Milk, ? Less than $3</p>
<p class="card-param-2">2.5</p>
<div class="info">
<h2 class="card-title">Piccolo</h2>
<p class="card-description">Translates from the Italian as a 'baby latte'. It consists of a ristretto shot topped with warmed milk and served in a 100ml glass demitasse</p>
</div>
</a>
<a target="_blank" href="" class="card ☕Strong, ? Less than $3" data-blink-id="jgvbz7l6anov8qjytg3jb" style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url("https://assets.blinkloader.com/3287797048/4112698691_ristretto-450.webp"); padding: 100px;">
<p class="card-param-1">☕Strong, ? Less than $3</p>
<p class="card-param-2">5</p>
<div class="info">
<h2 class="card-title">Ristretto</h2>
<p class="card-description">Traditionally a short shot of espresso made from the usual amount of ground coffee and half the amount of water in the same amount of time by using a finer grind</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>