Question

基本上，当有人输入邮政编码时，例如18052，跨度等级为18052的DIV将报告回来。最初，我希望所有DIV都保持隐藏状态，直到单击“提交”按钮为止。

我非常接近，但是当点击“提交”按钮时，div显示然后快速隐藏。我不确定如何保持信息的显示。

$("#integrators-list div").hide();

$("#clickme").click(function(){

    // Retrieve the input field text and reset the count to zero
    var filter = $("#filter").val(), count = 0;
    if(!filter){
       $("#integrators-list div").hide();
       return;
    }

    var regex = new RegExp(filter, "i");
    // Loop through the comment list
    $("#integrators-list div").each(function(){

       // If the list item does not contain the text phrase fade it out
       if ($("span.zip").text().search(regex) < 0) {
          $("#integrators-list div").hide();

       // Show the list item if the phrase matches and increase the count by 1
       } else {
          $("#integrators-list div").show();
          count++;
       }
    });

    // Update the count
   // var numberItems = count;
   // $("#filter-count").text("Number of Integrators = "+count);
});

这是HTML：

<form id="live-search" action="" class="styled" method="post"> <fieldset><input type="text" class="text-input" id="filter" value="" /><input type="submit" id="clickme" value="Submit" /></fieldset></form>

`

<div class="integrator">
    <span class="zip">18052</span>
    <h2>WEPCO Full Service Material Handling Systems Integrator</h2>
    <h3>www.wepcoinc.com</h3>
    <p>WEPCO, Inc. has over 40 years of experience with a full range of engineered solutions for high throughput, mission-critical material handling projects.</p>
    <a href="#">Contact this integrator partner &gt;</a>
</div>

`

Answer 1

嗨，你有几个问题：

您的文本框和按钮位于带有method = post的表单标记内，而您的按钮是一个提交按钮

这意味着在单击按钮后将提交表单 - 这是您的代码执行后发生的事情，并且导致您看到的错误。

绕过这个添加“return false”，这将取消表单提交

请参阅：http://jsfiddle.net/VhZD9/1/

$(document).ready(function(){
    $("#integrators-list .integrator").hide();

    $("#clickme").click(function(){

        // Retrieve the input field text and reset the count to zero
        var filter = $("#filter").val(), count = 0;
        if(!filter){
           $("#integrators-list .integrator").hide();
           return false;
        }

        var regex = new RegExp(filter, "i");
        // Loop through the comment list
        $("#integrators-list .integrator").each(function(){

            var $this = $(this);
           // If the list item does not contain the text phrase fade it out
           if ($("span.zip", $this).text().search(regex) < 0) {
              $this.hide();

           // Show the list item if the phrase matches and increase the count by 1
           } else {
              $this.show();
              //count++;
           }
        });
        return false;
        // Update the count
       // var numberItems = count;
       // $("#filter-count").text("Number of Integrators = "+count);
    });
});

还要注意$（“＃integrators-list .integrator”）是比$（“＃integrators-list div”）更好的选择器，因为它更具体

和$（“＃integrators-list .integrator”）里面。你应该设置对“this”的引用，并使你的span.zip选择器相对于你刚刚选择的父元素

哦，显然它只是你想要隐藏或显示的当前元素，所以你可以调用$ this.hide（）或$ this.show（）

Answer 2

这里隐藏了所有内容$("#integrators-list div").hide();

这里显示的是所有内容：$("#integrators-list div").show();

您可能需要一个不同的选择器：

<html><div class="integrator">
<span class="zip">18052</span>
</div></html>

if($('.zip').each(function(item, idx){
        if(item.html()==filter)item.hide();
      });

*未经测试

Answer 3

我还分叉了你的代码：http://jsfiddle.net/cv63M/19/

$(document).ready(function(){
        $("#integrators-list div").hide();

    $("#clickme").click(function(){
                $("#integrators-list div").hide(); //hide all again for next search

        // Retrieve the input field text and reset the count to zero
        var filter = $("#filter").val(), count = 0;
        if(!filter){
           $("#integrators-list div").hide();
           return false;
        }

        var regex = new RegExp(filter, "i");
        // Loop through the comment list
        $("#integrators-list div").each(function(){
           //alert($(this).children("span.zip").text());

            //need to use "this" because is the current div in the loop (each)
           if ($(this).children("span.zip").text().search(regex) >= 0) {
                    $(this).show();//show div if matches with search
                       count//++; increment counter
                       return false;//finish the loop
           }
           // Show the list item if the phrase matches and increase the count by 1

        });

        // Update the count
       // var numberItems = count;
       // $("#filter-count").text("Number of Integrators = "+count);
        return false;
    });
});

似乎工作。但@Kevin Owen已经向您展示了脚本的问题。

你的代码中的主要问题是你没有使用对“this”的引用，然后在你的循环中你正在使用所有的div，因为你没有在div中指定div或span。我使用jQuery“children”中的一个方法（差异方法来自Kevin）。

jQuery搜索表单返回Div

3 个答案: