Console.log срабатывает в операторе if, но остальная часть кода не срабатывает
Я пытаюсь скрыть $("#shop-subcategories-menu"), когда на входе #filter есть что-то (текст), и вернуть его видимость, когда он пуст.
Я не могу понять, почему console.info(true) срабатывает и возвращает true, но
$("#shop-subcategories-menu").toggle(true); не горит.
Если я напишу $("#shop-subcategories-menu").toggle(true); прямо в консоли, div снова станет видимым.
Я, очевидно, что-то упускаю, но я не вижу, что, пожалуйста, помогите.
Короче говоря: как сделать видимым переключатель <div id = "shop-subcategories-menu">TEST</div>, когда <input id = "filter" type = "text" placeholder = "Search.."> пуст??
$(document).ready(function(){
$(document).on('keyup', '#filter', function (e) {
if ($(this).val() === '') {
console.info(true);
$("#shop-subcategories-menu").toggle(true);
}
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
$("#shop-subcategories-menu").toggle(false);
});
});
});<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<div id = "shop-subcategories-menu">TEST</div>
<p>Type something in the input field to search the table for first names, last names or emails:</p>
<input id = "filter" type = "text" placeholder = "Search..">
<br><br>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id = "myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</body>
</html>Пожалуйста, уточните, функция из: w3schools.com/jquery/jquery_filters.asp
Да, то, как они его использовали, это ерунда. Извините, но w3schools не лучшее место для изучения jquery. Они также использовали его как each. Его следует использовать для фильтрации результатов, а затем применить действие к отфильтрованным результатам, например $("tr").filter(function() { return $(this).text() == "x"; }).show();
В любом случае, $("#shop-subcategories-menu").toggle(false) по-прежнему запускается для каждой итерации. Вы пытаетесь предотвратить скрытие меню, если есть совпадающие строки?
Я хочу, чтобы меню было скрыто, когда на вводе есть какой-либо текст, и было видно, когда ввод пуст. Не могли бы вы опубликовать пример какого-то фрагмента кода? Я не могу понять это. В моем коде все работает, но часть ввода пуста, и меню должно снова стать видимым.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
вам не нужно вводить true, потому что toggle() делает прямо противоположное текущему состоянию элемента.
(если он показан, он скрывает его, если он скрыт, он показывает его)
или:
Просто используйте hide() и show() jQuery.
https://www.w3schools.com/jquery/jquery_hide_show.asp
иметь полный контроль
обновить, чтобы ответить.
вам все равно нужно будет обрабатывать то, что происходит, когда он не пуст
в вашей функции сделайте что-то вроде:
if ($(this).val() === '') {
console.info(true);
$("#shop-subcategories-menu").hide();
} else {
$("#shop-subcategories-menu").show();
}
Мой пример не работает ни с toggle() (без true), ни с show(). Не могли бы вы опубликовать пример или код?
@Victordb я отредактировал свой ответ для возможного решения
Разбейте это на гораздо более простой случай без таблицы и фильтрации. Таблица и фильтрация отвлекают от того, что вы спрашиваете.
Вы можете создать простое логическое значение на основе текущего значения и передать его в toggle()
$(document).ready(function() {
$(document).on('keyup', '#filter', function(e) {
var showMenu = !$(this).val()
$("#shop-subcategories-menu").toggle(showMenu);
});
});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "shop-subcategories-menu">TEST</div>
<p>Type something in the input field to search the table for first names, last names or emails:</p>
<input id = "filter" type = "text" placeholder = "Search..">Да, это работает, но я не могу интегрировать его с остальной частью кода. Не могли бы вы интегрировать его с фильтром таблицы?
Интегрировать для чего? Все, что вы спросили, это как обрабатывать пустое поле поиска или нет.
Да, но в контексте фильтрации таблицы. Если вы вырвать это из контекста, это может сработать, но я не могу заставить его работать внутри всей функции. Если вы можете найти ошибку, зачем вам убирать функцию вместо того, чтобы показывать, где я ошибся?
Нет причин, по которым это не должно работать, когда таблица и фильтрация возвращаются обратно. Эти две операции не имеют ничего общего друг с другом, кроме использования одного и того же входного значения.
Не уверен, что вы хотите
$("#myTable tr").filterтам - может быть$("#myTable tr").each, потому что именно так вы его используете, поэтому$("#shop-subcategories-menu").toggle(false)срабатывает для каждой строки.