Я попытался заставить этот фильтр работать должным образом.
Я установил фильтрацию и показываю только то, что ищу, на основе имени класса карты (список целевых страниц). но эта функция не работает, как она может работать?
Я пытаюсь реализовать, но я все еще не понимаю, потому что я новичок в программировании на javascript
Вот код:
<section class="content-special-sites page-section">
<div class="landing-pages-wrapcontent">
<div class="list-special-sites-wrapper">
<div id="list-item" class="landing-pages-row">
<div class="landing-pages-column pria">
<div class="landing-pages-card">
<img src="assets/images/list-1.jpg" style="width: 100%;">
<div class="landing-pages-container">
<div class="landing-pages-date">17 Agustus 2019</div>
<div class="landing-pages-list">G-SHOCK GA 700</div>
</div>
<div class="landing-pages-button-wrapper">
<a class="button-detail-list" href="#lihat-detail-list1" target="_blank">Lihat
Detail</a>
</div>
</div>
</div>
<div class="landing-pages-column pria">
<div class="landing-pages-card">
<img src="assets/images/list-2.jpg" style="width: 100%;">
<div class="landing-pages-container">
<div class="landing-pages-date">17 Agustus 2019</div>
<div class="landing-pages-list">SPINNAKER VINTAGE HULL</div>
</div>
<div class="landing-pages-button-wrapper">
<a class="button-detail-list" href="#lihat-detail-list2" target="_blank">Lihat
Detail</a>
</div>
</div>
</div>
<div class="landing-pages-column pria">
<div class="landing-pages-card">
<img src="assets/images/list-3.jpg" style="width: 100%;">
<div class="landing-pages-container">
<div class="landing-pages-date">17 Agustus 2019</div>
<div class="landing-pages-list">SEIKO 5 SPORTS</div>
</div>
<div class="landing-pages-button-wrapper">
<a class="button-detail-list" href="https://first.id/special-site/seiko-5/"
target="_blank">Lihat Detail</a>
</div>
</div>
</div>
<div class="landing-pages-column wanita">
<div class="landing-pages-card">
<img src="assets/images/list-4.jpg" style="width: 100%;">
<div class="landing-pages-container">
<div class="landing-pages-date">17 Agustus 2019</div>
<div class="landing-pages-list">ALEXANDRE CHRISTIE</div>
</div>
<div class="landing-pages-button-wrapper">
<a class="button-detail-list"
href="https://first.id/special-site/alexandre-christie/" target="_blank">Lihat
Detail</a>
</div>
</div>
</div>
<div class="landing-pages-column pria">
<div class="landing-pages-card">
<img src="assets/images/list-5.jpg" style="width: 100%;">
<div class="landing-pages-container">
<div class="landing-pages-date">17 Agustus 2019</div>
<div class="landing-pages-list">SPINNAKER VINTAGE CROFT</div>
</div>
<div class="landing-pages-button-wrapper">
<a class="button-detail-list"
href="https://first.id/special-site/spinnaker-vintage-croft/"
target="_blank">Lihat Detail</a>
</div>
</div>
</div>
<div class="landing-pages-column wanita">
<div class="landing-pages-card">
<img src="assets/images/list-6.jpg" style="width: 100%;">
<div class="landing-pages-container">
<div class="landing-pages-date">17 Agustus 2019</div>
<div class="landing-pages-list">SPINNAKER PRO HELIUM</div>
</div>
<div class="landing-pages-button-wrapper">
<a class="button-detail-list"
href="https://first.id/special-site/spinnaker-pro-helium/" target="_blank">Lihat
Detail</a>
</div>
</div>
</div>
<div class="landing-pages-column pria">
<div class="landing-pages-card">
<img src="assets/images/list-7.jpg" style="width: 100%;">
<div class="landing-pages-container">
<div class="landing-pages-date">17 Agustus 2019</div>
<div class="landing-pages-list">TOMMY HILFIGER</div>
</div>
<div class="landing-pages-button-wrapper">
<a class="button-detail-list" href="#list-7" target="_blank">Lihat
Detail</a>
</div>
</div>
</div>
</div>
<div class="landing-pages-load-more">
<center><a class="landing-pages-load-more-ajax" id="load-more">Load More</a>
</center>
</div>
</div>
</div>
</section>
А это джаваскрипт
function myFunction() {
var input, filter, card, list, a, i;
input = document.getElementById("searchbar");
filter = input.value.toUpperCase();
card = document.getElementById("list-item");
list = card.getElementsByTagName("div .landing-pages-list");
for (i = 0; i < list.length; i++) {
a = list[i].getElementsByTagName("div .landing-pages-list")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
list[i].parentElement.parentElement.style.display = "";
} else {
list[i].parentElement.parentElement.style.display = "none";
}
}
}
Когда я печатаю, не работает
1 ответ
В getElementsByTagName есть имя тега, за которым следует класс CSS, который ничего не найдет.
Если бы вы могли использовать этот метод, это было бы getElementsByTagName("div");
Однако, поскольку в приведенном выше примере будут получены все элементы div на странице, вместо этого следует использовать getElementsByClassName("landing-pages-list").
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Обратите внимание, что JavaScript — это НЕ Java. Включите все теги, относящиеся к вашему вопросу: например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [стройный] и т. д.