0

jQuery クイックサーチ(変更を加えた例 #1) を WordPress テンプレートに正常に実装しましたが、本当に完璧にするためには、jQuery 部分を微調整する必要があり、それは私の得意分野ではありません。

私のheader.phpテンプレートには次のものがあります：

<?php if(is_post_type_archive('books')){
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory')?>/js/jquery.quicksearch.js"></script>
    <script type="text/javascript">
$(function () {
$('input#id_search').quicksearch('div#booklist div.cover');

        });
    </script>
<?php
}
?>

そして私のWordPressテンプレートでは（クエリを省略しています）：

<form action="#" id="searchform"><div><input autocomplete="off" type="text" name="s" class="search" id="id_search" onblur="if (this.value == '') {this.value = 'enter title of the book you are looking for...';}" onfocus="if (this.value == 'enter title of the book you are looking for...') {this.value = '';}" value="enter title of the book you are looking for..."/></div></form>

<div id="booklist">

<h4>Series Name</h4>

<div class="cover"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php echo $ftimg; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" width="133" height="200" /></a>
<?php
echo "<br>";
the_title();
?>
</div>

<h4>Series Name #2</h4>

<div class="cover"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php echo $ftimg; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" width="133" height="200" /></a>
<?php
echo "<br>";
the_title();
?>
</div>


and so on....

</div>

本のタイトルを入力して検索すると、この 1 本だけでなく、すべての h4 見出しが結果として表示されます。私の望む視覚的な結果は、本の h4 見出し (つまり、本が属するシリーズの名前) と本自体が残り、残りの本がクエリに一致しないのと同じように、他のすべての h4 見出しが「消える」ことです。行う。

4

1 に答える 1

0

以下のコードを試して、出力を教えてください。

    $(function () {
    $('input#id_search').quicksearch('div#booklist div.cover',{
        'show': function () {
            $(this).addClass('show');
        }
    });

    if($('div#booklist div.cover').hasClass('show') && $.trim($('#txtEmail').val()).length>0){
        $('.show').prev('h4').css('display','block !important');
        $('h4').css('display','none');
    }

    });

注:未テスト

于 2015-01-22T06:36:12.857 に答える