Question

我做我的搜索表并使用Jquery。如此有效，它向我显示了结果，但仅在第二次显示。当我第一次单击它时-它显示了所有块。

$(document).ready(function(){
$('#search').click(function () {
    text = $('#search_word').val();
    $(".return").fadeIn('slow');
    $('.topic_retain:contains("' + text + '")').css("display", "block");
    $('.question_block:contains("' + text + '")').fadeIn();
});

$(".go_back").click(function(){
        $('.search_topic').fadeIn();
});    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" placeholder="Search" id="search_word"><button 
id="search">Search</button>
<div class="return"><span class="go_back">Go Back</span></div>
    
    <div class="topic_retain">
        <h1>Retain</h1>
        <div class="question_block">
            <div class="question"><span class="q">First question</span></div>
            <div class="answer">First answer.</div>
        </div>
        <div class="question_block">
            <div class="question"><span class="q">Second question</span></div>
            <div class="answer">Second question</div>
        </div>
        <div class="question_block">
            <div class="question"><span class="q">Third question</span></div>
            <div class="answer">Third answer.
            </div>
        </div>
    </div>

Answer 1

实际上，在您的JS代码中，您未定位到在HTML代码中可见的元素。但是，您忘记了“}）;”关闭“ $（document）.ready（function（）{”。

因此只需将其添加到末尾，它便会正常启动。 Js应该看起来像这样：

$(document).ready(function(){
  $('#search').click(function(){
    text = $('#search_word').val();
    $(".return").fadeIn('slow');
    $('.topic_retain:contains("'+text+'")').css("display", "block");
    $('.question_block:contains("'+text+'")').fadeIn();
    $('.topic_container').fadeOut();
    $('.search_container').fadeOut();
    $('.search_topic').fadeOut();
  });
});

希望它会有所帮助：）

jQuery点击事件在第二次点击时触发，但在搜索表单中没有第一次触发

1 个答案: