如何基於關鍵字過濾器切換div的可見性

Question

我有一些包含不同關鍵字的卡片的HTML：

<div class="item">
    <div class="hashtags">
        <span><a href="#">Healthcare</a></span>
        <span><a href="#">Mobility</a></span>
    </div>
</div>
<div class="item">
    <div class="hashtags">
        <span><a href="#">Finance</a></span>
        <span><a href="#">Mobility</a></span>
    </div>
</div>

...以及一些可以打開/關閉的葯丸的HTML：

<div class="hashtags">
    <span class="active"><a href="#">Finance</a></span>
    <span class="inactive"><a href="#">Healthcare</a></span>
    <span class="inactive"><a href="#">Managed Services</a></span>
    <span class="inactive"><a href="#">Mobility</a></span>
</div>

這個想法是能夠單擊“ Finance”的葯丸，並且只會顯示其標簽類中包含“ Finance”的那些項目，而所有其他項目都將被隱藏。 我嘗試搜索如何根據內容進行過濾/切換，但似乎找不到任何內容。 到目前為止，這是我的JS，它僅切換葯丸樣式的有效/無效類：

    $('.hashtags>span').click(function() {
    $(this).toggleClass('inactive');
    $(this).toggleClass('active');
    });

我知道有一種方法可以查找HTML並比較JS或jQuery中的字符串...但不確定那是最好的方法。 任何建議表示贊賞。 非常感謝！

Answer 1

這里是一個完整的示例。 我在代碼中添加注釋

 $('.hashtags > span').on('click', function(e) { e.preventDefault(); // first we store value var storedValue = $(this).text(); // send it to a function highlightHashtag(storedValue); }); var highlightHashtag = function(value) { // iterate through all $('.hashtags > span').each(function() { if($(this).text() !== value) { // if doesnt match, inactive $(this).removeClass('active'); $(this).addClass('inactive'); } else { $(this).removeClass('inactive'); $(this).addClass('active'); } }); }; 

 .active { background-color:green; } .inactive { background-color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="item"> <div class="hashtags"> <span><a href="#">Healthcare</a></span> <span><a href="#">Mobility</a></span> </div> </div> <div class="item"> <div class="hashtags"> <span><a href="#">Finance</a></span> <span><a href="#">Mobility</a></span> </div> </div> 

Answer 2

我想我理解您的問題，首先，隱藏所有.items，然后顯示所有帶有包含您所選文本的標簽的.items。 像這樣（未經測試）

最終解決方案

$('.hashtags>span').unbind('click').click(function() {
    var text = $(this)
            .toggleClass('inactive')
            .toggleClass('active');
    var items = $('.item').hide();
    $('.hashtags>span.active').each(function(){
        var t = $(this).find('a:first').text() ;
        items.each(function(){
            var i = $(this);
            //find all items containing a a with the activated hashtag text
            if(i.find('.hashtags>span>a:contains(\'' + t + '\')').length > 0) {
                i.show();
            }
        });
    });
});

Answer 3

我認為如果您在HTML中添加一些自定義標簽，效果會更好。 看我的簡單例子：

在html中，您可以添加一些自定義屬性，例如data-something，它們可能確實有用。

CSS僅突出顯示哪個類位於哪個對象上

您可以在此處嘗試我的代碼，或在JSFiddle上查看它：https： //jsfiddle.net/w19ytk8p/

 $('.hashtags>span').click(function() { $(this).toggleClass('inactive'); $(this).toggleClass('active'); var tag = $(this).attr("data-tag"); var related = []; $('.hashtags').each(function(index){ $(this).children( "span" ).removeClass("active"); $(this).children( "span" ).addClass("inactive"); if($(this).attr("data-tag") !== undefined && $(this).attr("data-tag").indexOf(tag)>-1) {related.push(this);} }); $(related).each(function(){ $(this).children( "span" ).removeClass("inactive"); $(this).children( "span" ).addClass("active"); }); }); 

 .inactive > a{ color: red; } .active > a{ color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="item"> <div class="hashtags" data-tag="healthcare finance"> <span><a href="#">Healthcare</a></span> <span><a href="#">Mobility</a></span> </div> </div> <div class="item"> <div class="hashtags" data-tag="finance mobility"> <span><a href="#">Finance</a></span> <span><a href="#">Mobility</a></span> </div> </div> <div class="hashtags"> <span class="active" data-tag="finance"><a href="#">Finance</a></span> <span class="inactive" data-tag="healthcare"><a href="#">Healthcare</a></span> <span class="inactive" data-tag="managedServices"><a href="#">Managed Services</a></span> <span class="inactive" data-tag="mobility"><a href="#">Mobility</a></span> </div>