jQuery按2標準過濾，將點擊過濾器行爲添加到多個頁面元素

我有一個jQuery過濾器，內置了2個不同的標準集市場部門和項目類型。每組標準都使用帶有錨標籤的無序下拉列表。jQuery按2標準過濾，將點擊過濾器行爲添加到多個頁面元素

我現在想要做的是將單擊過濾器功能上的相同功能添加到僅適用於市場部門標準的頁面上的一組圖像。

例如，我目前有6個不同的市場部門。在初始頁面加載時，加載6個圖像（在具有類'category-images的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-圖像」）點擊（函數（）{ $ （。 'ul.filter李一'）最近（ 'UL'）找到（ 'A'）removeClass（ '選擇'）;。 $（本）.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>

在此之後，項目列表顯示的類與過濾器項目中的數據值相匹配。如果您需要更多信息，請與我們聯繫。謝謝！

來源

2013-07-03 kennycrippen

今天我明白了這一點。看來我在原來的嘗試中多了一行不必要的代碼。我更新的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(); 


});

來源

2013-07-04 20:07:41 kennycrippen

jQuery按2標準過濾，將點擊過濾器行爲添加到多個頁面元素

回答

相關問題