Question

我构建了一个jQuery过滤器，它通过两组不同的标准（市场部门和项目类型）对元素进行排序。每组标准都使用带有锚标记的无序下拉列表。

我现在要做的是将点击过滤功能添加到页面上的一组图片中，仅用于市场行业标准。

例如，我目前有6个不同的市场领域。在初始页面加载时，加载6个图像（在具有类“类别 - 图像”的div内部），一个代表每个市场扇区。用户可以点击其中一个图像来过滤该市场部门的项目列表，也可以使用无序列表下拉列表来过滤项目。

我尝试在点击功能中添加'div.category-images a'，但这不起作用。我还尝试完全为类别图像设置一个单独的功能，但收效甚微。

jQuery代码：

// click function for unordered list dropdowns

$("ul.filter li a").click(function()
{
    $(this).closest('ul').find('a').removeClass('selected');
    $(this).addClass('selected');

    var marketSector    = $('ul#marketSector li a.selected').data('value');
    var projectType    = $('ul#projectType li a.selected').data('value');
    var marketSectorSelector = '';
    var projectTypeSelector = '';

    if (marketSector === "all" && projectType === "all")
    {
        //show all items
        $(".project").delay(200).fadeIn(400);

        //show the viewing all text and hide the others
        $("div.nowviewing-all").show();
        $("div.nowviewing-marketsectors, div.nowviewing-market-project").hide();
        }

    else
    {
        if (projectType !== "all")
        {
            projectTypeSelector = '.' + projectType;
        }

        if (marketSector !== "all")
        {
            marketSectorSelector = '.' + marketSector;
        }

        $(".project").fadeOut('fast');
        $(projectTypeSelector + marketSectorSelector).delay(200).fadeIn(400);

        //show the viewing market/project text and hide the others
        $("div.nowviewing-market-project").show();
        $("div.nowviewing-marketsectors, div.nowviewing-all").hide();
    }

});
// put the current category text into the viewing all text

$('ul#marketSector div.dropdown li a').bind("click touch", function (){
    $('div.nowviewing-market-project span.current-marketsector').text( $(this).text() );
});

$('ul#projectType div.dropdown li a').bind("click touch", function (){
    $('div.nowviewing-market-project span.current-projecttype').text( $(this).text() );
});
/* -------------------------------------------------------- */
/* Portfolio - Show/Hide Category Images on load & filter                   
/* -------------------------------------------------------- */

$('ul.filter li a').click(function(){
    $('div.category-images').hide();
    $('div#sorter').show();
});


$('div.category-images a img, div.category-images a h3').click(function(){
    $('div.category-images').hide();
    $('div#sorter').show();
});


/* -------------------------------------------------------- */
/* Filter Dropdowns                 
/* -------------------------------------------------------- */

$("ul#projectType span.filtertext").click(function(){
    $("ul#projectType div.dropdown").fadeToggle('fast');
    $("ul#marketSector div.dropdown").hide();
    return false;
});

$("ul#marketSector span.filtertext").click(function(){
    $("ul#marketSector div.dropdown").fadeToggle('fast');
    $("ul#projectType div.dropdown").hide();
    return false;
});

// hide dropdowns if anywhere else is clicked
$(document).click(function() {
    $('ul.filter div.dropdown').hide();
});

这是我尝试新功能（最好的马车） $（“div.category-images a”）。click（function（） { $（'ul.filter li a'）。nearest（'ul'）。find（'a'）。removeClass（'selected'）; $（本）.addClass（ '选择'）;

    var marketSectorBox    = $('div.category-images a.selected').data('value');
    var marketSectorSelectorBox = '';
    var projectTypeSelectorBox = '';

    if (marketSectorBox === "all")
    {
        //show all items
        $(".project").delay(200).fadeIn(400);
        }
    else
    {

        if (marketSectorBox !== "all")
        {
            marketSectorSelectorBox = '.' + marketSectorBox;
        }

        $(".portfoliogrid").fadeOut('fast');
        $(projectTypeSelectorBox + marketSectorSelectorBox).delay(200).fadeIn(400);
    }

});

最后，HTML

<div class="nowviewing-marketsectors">
    <p>Viewing <span>Market Sectors</span></p>
</div>

<div class="nowviewing-all">
    <p>Viewing <span>All Projects</span></p>
</div>

<div class="nowviewing-market-project">
    <p>Viewing <span class="current-marketsector">All Market Sectors</span> and <span class="current-projecttype">All Project Types</span> Projects</p>
</div>

<!-- PROJECT TYPE DROPDOWN -->
<ul class="filter" id="projectType">
<span class="filtertext"><span>Project Type</span><img class="filter_drop" src="http://localhost:8888/rh/wp-content/themes/rh_construction/images/filter_drop.gif" />            </span>
<div class="dropdown">
<li><a class="selected" data-value="all">All Project Types</a></li>

<li><a data-value="ground-up">Ground Up</a></li><li><a data-value="historic-renovation-rehabilitation">Historic Renovation</a></li>
<li><a data-value="remodel">Remodel</a></li>
<li><a data-value="sustainable">Sustainable</a></li>
<li><a data-value="tenant-improvement">Tenant Improvement</a></li></div>
</ul>


<!-- MARKET SECTOR DROPDOWN -->
<ul class="filter" id="marketSector">
<span class="filtertext"><span>Market Sector</span><img class="filter_drop" src="http://localhost:8888/rh/wp-content/themes/rh_construction/images/filter_drop.gif" /></span>
<div class="dropdown">
<li><a class="selected" data-value="all">All Market Sectors</a></li>

<li><a data-value="automotive">Automotive</a></li>
<li><a data-value="community">Community</a></li>
<li><a data-value="custom-homes">Custom Homes</a></li>
<li><a data-value="education">Education</a></li><li><a data-value="office">Office</a></li>
<li><a data-value="wineries-breweries">Wineries &amp; Breweries</a></li>
</div>
</ul>

<!-- Filter Images on Landing -->
<div class="category-images">

<!-- Market Sector 1 -->
    <div class="portfoliogrid project large-6 columns end nopadding">
    <a href="javascript:void(0)" data-value="automotive">
        <img src="http://localhost:8888/rh/wp-content/uploads/2013/05/auto.jpg" />
    <h3>Automotive</h3></a>
</div>

<!-- Market Sector 2 -->
    <div class="portfoliogrid project large-6 columns end nopadding">
    <a href="javascript:void(0)" data-value="community">
        <img src="http://localhost:8888/rh/wp-content/uploads/2013/05/keen-thumb2.jpg" />
    <h3>Community</h3></a>
</div>

<!-- Market Sector 3 -->
    <div class="portfoliogrid project large-6 columns end nopadding">
    <a href="javascript:void(0)" data-value="custom-homes">
        <img src="http://localhost:8888/rh/wp-content/uploads/2013/05/brew.jpg" />
    <h3>Custom Homes</h3></a>
</div>

<!-- Market Sector 4 -->
    <div class="portfoliogrid project large-6 columns end nopadding">
    <a href="javascript:void(0)" data-value="education">
        <img src="http://localhost:8888/rh/wp-content/uploads/2013/05/auto.jpg" />
    <h3>Education</h3></a>
</div>

<!-- Market Sector 5 -->
    <div class="portfoliogrid project large-6 columns end nopadding">
    <a href="javascript:void(0)" data-value="office">
        <img src="http://localhost:8888/rh/wp-content/uploads/2013/05/keen-thumb2.jpg" />
    <h3>Office</h3></a>
</div>

<!-- Market Sector 6 -->
    <div class="portfoliogrid project large-6 columns end nopadding">
    <a href="javascript:void(0)" data-value="wineries-breweries">
        <img src="http://localhost:8888/rh/wp-content/uploads/2013/05/auto.jpg" />
    <h3>Wineries and Breweries</h3></a>
</div>

在此之后，项目列表将显示与筛选项中的数据值匹配的类。如果您需要更多信息，请与我们联系。谢谢！

Answer 1

我今天想到了这一点。在我最初的尝试中，似乎我有一些额外的不必要代码。我更新的jQuery如下：

// for the category images

$("div.category-images a").click(function()
{
    $(this).addClass('selected');

    var marketSectorBox    = $('div.category-images a.selected').data('value');
    var marketSectorSelectorBox = '';
    var projectTypeSelectorBox = '';

        if (marketSectorBox !== "all")
        {
            marketSectorSelectorBox = '.' + marketSectorBox;
        }

        $(".project").hide();
        $(projectTypeSelectorBox + marketSectorSelectorBox).delay(200).fadeIn(400);

        //show the viewing market/project text and hide the others
        $("div.nowviewing-market-project").show();
        $("div.nowviewing-marketsectors, div.nowviewing-all").hide();


});

jQuery Filter by 2 Criteria，将点击过滤器行为添加到多个页面元素

1 个答案: