javascript - 2つの基準によるjQueryフィルター、クリックフィルター動作を複数のページ要素に追加

Question

要素を 2 つの異なる基準セット、マーケットセクターとプロジェクトタイプでソートする jQuery フィルターを作成しました。条件の各セットは、アンカータグを含む順序付けられていないドロップダウンリストを使用します。

私が今やりたいことは、Market Sector 基準のみのページ上の画像のグループに同じオンクリックフィルター機能を追加することです。

たとえば、私は現在 6 つの異なる市場部門を持っています。最初のページの読み込みで、6 つの画像が読み込まれます (クラス 'category-images の div 内)。1 つは各市場セクターを表します。そこから、ユーザーは画像の 1 つをクリックして、その市場セクターでプロジェクトのリストをフィルタリングするか、順序付けられていないリストのドロップダウンを使用してプロジェクトをフィルタリングすることができます。

クリック機能に「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').closest('ul').find ('a').removeClass('selected'); $(this).addClass('selected');

    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>

この後、フィルター項目のデータ値に一致するクラスを含むプロジェクトのリストが表示されます。さらに情報が必要な場合はお知らせください。ありがとうございました！

javascript - 2つの基準によるjQueryフィルター、クリックフィルター動作を複数のページ要素に追加

1 に答える 1

Related

Reference