Javascript jQuery/ajax过滤函数

我正在建立一个网站，比较域名的价格，我需要一个特定功能的帮助

目前，网站上有一个部分，您可以单击任何tld按钮（.com、.net等），然后它将过滤周围的div，并仅显示定价从低到高排序的注册商。该过滤器如下所示：

<li><a href="#portfolio-filter" title="generic TLD" class="orangebutton smallrectange" data-filter=".com">.com</a></li>

以下是筛选div的代码：

$(document).ready(function(){

    var $container = $('#portfolio-container')
    // initialize Isotope
        $container.isotope({
            // options...
            resizable: false, // disable normal resizing
            layoutMode : 'fitRows',
            itemSelector : '.element',
            animationEngine : 'best-available',

            // set columnWidth to a percentage of container width
            masonry: { columnWidth: $container.width() / 5 }
        });

        // update columnWidth on window resize
        $(window).smartresize(function(){
            $container.isotope({
            // update columnWidth to a percentage of container width
            masonry: { columnWidth: $container.width() / 5 }
            });
        });
        $container.imagesLoaded( function(){

                $container.isotope({
            // options...
                });
        });

        $('#portfolio-filter a').click(function(){
            var selector = $(this).attr('data-filter');
            $container.isotope({ filter: selector });
            return false;
        });
});

---

因此，您当前有以下设置：

具有域的div有一个对应于其tld的类，tld按钮有一个

数据过滤器

属性，该属性包含一个用于过滤具有域的div的选择器

要按用户提供的域名进行筛选，您必须向div添加一些属性，让我们知道div属于哪个域，例如：

<div class="element com isotope-item" style="..." data-domain="www.suitforthestars.com">
    <div class="portfoliowrap">
        <div class="title">...</div>
        <div class="portfolioimage">...<img src="http://www.suitforthestars.com/css/images/94_godaddy.png">...</div>
        <div class="text">...</div>
    </div>
</div>

您可以在上阅读有关属性选择器的信息

编辑：以下内容似乎解决了聊天中澄清的问题：

$(document).ready(function(){
    ...
    $('#portfolio-filter a').click(function(){
        var selector = $(this).attr('data-filter');
        $container.isotope({ filter: selector });
        return false;
    });

    $('#domain').live('keyup', function(event) {
        event.preventDefault();
        if(App.search_type != '3')
            return;
        clearInterval(timer);
        timer = setInterval(function() {
            clearInterval(timer);
            var val = $('#domain').val();
            var selector = val.replace(/^.*(\.\w+)$/, '$1';
            $container.isotope({ filter: selector });
            if(val)
                checkDomainAvailability();
        }, 400);
    });
});

---

您能否提供您已有的javascript，以便我们可以对其进行修改以满足您的需要？有人对如何实现这一点有任何想法吗？您提供的功能可以处理用户在

#domain

框中输入域名的问题，并且在您最初的问题中，您提到单击tld divs也可以工作。那么问题出在哪里呢？我想在进入域时，divs会过滤，就像是通过点击其中一个按钮过滤一样。该网站是checkdomainprices.com，它将帮助您更好地理解我的目标。您没有提供在用户单击其中一个按钮时隐藏div的代码。如果我没有看到它，我怎么能模仿它的行为呢？因此，为了澄清这一点，通过添加data domain筛选器，当用户在其域中键入时，它将允许对div进行筛选？@MrTechie确切地说，要筛选某些内容，您必须有足够的数据available@MrTechine为什么域会在运行时更改？据我所知，您的大多数域都是在启动时创建的，甚至可能是服务器端（有些div可以通过tld按钮过滤，对吗？），当用户要求您创建一个新div时，您只需问他应该拥有哪个域，并以与创建其余域相同的方式创建它divs@MrTechie不$container代码正在搜索div中已经存在的

data domain

，以确定要过滤哪些div。非常感谢您了解问题并帮助纠正它。非常感谢！

<div class="element com isotope-item" style="..." data-domain="www.suitforthestars.com">
    <div class="portfoliowrap">
        <div class="title">...</div>
        <div class="portfolioimage">...<img src="http://www.suitforthestars.com/css/images/94_godaddy.png">...</div>
        <div class="text">...</div>
    </div>
</div>

$container.isotope({ filter: ".isotope-item[data-domain*='" + $('#domain').val() + "']" });

$(document).ready(function(){
    ...
    $('#portfolio-filter a').click(function(){
        var selector = $(this).attr('data-filter');
        $container.isotope({ filter: selector });
        return false;
    });

    $('#domain').live('keyup', function(event) {
        event.preventDefault();
        if(App.search_type != '3')
            return;
        clearInterval(timer);
        timer = setInterval(function() {
            clearInterval(timer);
            var val = $('#domain').val();
            var selector = val.replace(/^.*(\.\w+)$/, '$1';
            $container.isotope({ filter: selector });
            if(val)
                checkDomainAvailability();
        }, 400);
    });
});