Блог

Я пытаюсь создать простой поисковик / маркер, и я сталкиваюсь с трудностями из-за противоречивых результатов / ничего не происходит, когда я его тестирую.

Я думаю, что самый большой пробел заключается в моем понимании того, как должны работать функции обратного вызова и чему могут соответствовать селекторы.

В идеале, когда кто-то нажимает на тег, все должно исчезать, и снова должны появляться только погружения с соответствующими тегами в них. Если ничего не совпадает, то должен появиться раздел «Ничего не найдено», а сброс должен очень быстро исчезнуть, и все разделы (без nomatch div) снова появятся без подсветки.

Кто-нибудь дает некоторые разъяснения о том, где я могу улучшить?

Редактировать: Смотрите ссылку в комментариях, чтобы увидеть мой код.

Дополнительные разъяснения по проблемам: Щелкните по тегу (старый, фотография, руководство), а затем нажмите на сброс. Все три части должны появиться снова, но появляются только две.

Случайным образом будет отображаться сообщение «Не найдено результатов».

Если вы выберете тег, а затем выполните поиск в другом, входы и выходы будут асинхронными.

Проблема в том, что .fadeout() было на каждом .workshopentry , поэтому на самом деле было бы 3 затухания. Следовательно, функция обратного вызова для завершения анимации вызывалась также 3 раза! Таким образом, логика определения того, какие новые записи показывать и скрывать, выполнялась 3 раза и вызывала странное многократное исчезновение.

Я обновил jsfiddle более надежным решением.

Дайте мне знать, если вам нужно больше объяснений того, что делает JavaScript.

Вам нужно скопировать следующий код

    if (toFadeIn.length < 1) {      //No results found
        toFadeIn.push(noResults);
    }

    $(toFadeIn).each(function(index, div){
        div.fadeIn(1000);       
    });    
  

внутри функции обратного вызова workshop.fadeout .. вот так :

 workshop.fadeOut(1000, function() {
        var tags = $('.left ul li', this);
        tags.removeClass('searchMatch');      //reset the search results
        tags.each(function() {                
            if ($(this).text().toLowerCase() === searchTerm.toLowerCase()) {
                $(this).addClass('searchMatch');
                toFadeIn.push($(this).parent().parent().parent());
            }
        });

        if (searchTerm === "") {
            toFadeIn.push(workshop);
        }
        if (toFadeIn.length < 1) {      //No results found
            toFadeIn.push(noResults);
        }

        $(toFadeIn).each(function(index, div){
           div.fadeIn(1000);       
         });    


    });
  

Вы видите? Обратный вызов fadeout еще не был вызван, но вы уже начали просматривать toFadeIn массив, чтобы показать результаты поиска. В то время он еще даже не просматривал записи.

Это связано только с тем, что мы в основном привыкли к последовательному коду, поэтому обратные вызовы требуют немного внимания. Но это действительно так работает. Вы просто продолжаете помещать код внутри обратного вызова .. а затем снова внутри другого обратного вызова и так далее.