JavaScriptを使用してコンテンツをフィルタリングする方法

本当に助けが必要です。JavaScriptを使用してコンテンツをフィルタリングする方法

私は7つの入力要素（ボタン）と明確な選択肢を持つdivを持っています。

<div class="col-lg-2 col-md-12"> 
    <a id="clear-selection" class="clear-selection">Clear Selections</a> 
</div> 

<div class="col-lg-10 col-md-12 selectable-buttons-container"> 
    <input type="button" value="Button 1" class="btn btn-sm btn-selectable-blue" /> 
    <input type="button" value="Button 2" class="btn btn-sm btn-selectable-blue" /> 
    <input type="button" value="Button 3" class="btn btn-sm btn-selectable-blue" /> 
    <input type="button" value="Button 4" class="btn btn-sm btn-selectable-blue" /> 
    <input type="button" value="Button 5" class="btn btn-sm btn-selectable-blue" /> 
    <input type="button" value="Button 6" class="btn btn-sm btn-selectable-blue" /> 
    <input type="button" value="Button 7" class="btn btn-sm btn-selectable-blue" /> 
</div>

また、iは、他のコンテンツの横に多数（30以上の行）とコンテンツそれらのそれぞれを有する、例えば、それに記載されているボタンのいくつかを有する

最初の行

<div class="row" style="padding-top: 30px;"> 
    <div class="col-lg-10 col-lg-offset-2 col-md-12 col-sm-12 col-xs-12"> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 dynamic-divs"> 
      <div class="col-lg-2 col-md-2 col-sm-3 col-xs-12" style="padding-left: 0; padding-right: 0"> 
       <input type="button" value="Button 6" class="btn btn-sm btn-dynamic-blue" /> 
       <input type="button" value="Button 2" class="btn btn-sm btn-dynamic-gray" /> 
      </div> 

      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> 
       <p class="dynamic-div-title">Div Title</p> 
       <p class="dynamic-div-text">Div Text</p> 
       <p class="dynamic-div-link">See Other Versions <img src="images/arrow-right.png" alt="Arrow"></p> 
      </div> 

      <div class="col-lg-6 col-md-6 col-sm-5 col-xs-12"> 
       <button class="btn dynamic-div-btn"><img src="images/arrow-right-white.png" class="pull-right" alt="Arrow"> Download</button> 
        <p class="hardened-images">This is some example paragraph</p> 
      </div> 
     </div> 
    </div> 
</div>

セカンド行

<div class="row"> 
    <div class="col-lg-10 col-lg-offset-2 col-md-12 col-sm-12"> 
     <div class="col-lg-12 col-md-12 col-sm-12 dynamic-divs"> 
      <div class="col-lg-2 col-md-2 col-sm-3" style="padding-left: 0; padding-right: 0"> 
       <input type="button" value="Button 3" class="btn btn-sm btn-dynamic-blue" /> 
      </div> 

      <div class="col-lg-4 col-md-4 col-sm-4"> 
       <p class="dynamic-div-title">Div Title</p> 
       <p class="dynamic-div-text">Text</p> 
       <input type="button" value="See Other Versions" class="dynamic-div-link"><img src="images/arrow-right.png" alt="Arrow"></input> 
      </div> 

      <div class="col-lg-6 col-md-6 col-sm-5"> 
       <button class="btn dynamic-div-btn"><img src="images/arrow-right-white.png" class="pull-right" alt="Arrow"> Download</button> 
       <p class="hardened-images">This is second example paragraph</p> 
      </div> 
     </div> 
    </div> 
</div>

私がする必要があるのは、基本的にはフィルターです。つまり、誰かがButtoを押すとn 1自分のコンテンツにボタン1があるすべての行のみを表示します。

誰かがボタン3を押すと、その中にBUTTON 1またはBUTTON 3がリストされているすべての行が表示されます。誰かがCLEAR SELECTIONを押してからデフォルトに戻すまで（すべての行が表示されます）。

誰かが私を助けて、これを行う方法を教えてもらえますか？

これはjQueryまたはpure JSで行うことができると思います。私はこれをやろうとしましたが、いくつかのコードを持っていますが、正直言って私が必要なものに近いものではないので、誰かが私をここで助けてくれることを望むと思ったのです。

出典

2017-02-20 Damian Damian

''のようにボタンに対応するクラスを追加することができます。クラス 'button_XX'で入力を持つdivs – TCHdvlp

@TCHdvlpどのようにして行全体を表示できますか？教えて頂けますか？ –

@DamianDamian対応するボタン番号またはクラスを持つ行のみを選択できます。 '$（ '。row'）。has（ '。button_XX'）'例えば – TCHdvlp

コードを、次の試してみてください。これは、これはあなたのニーズに合わせて[OK]をする必要がありようにあなたは:)

var hideAllDivs = false; 
 

 
$(document).ready(function() { 
 
    hideAllDivs = true; 
 
}); 
 

 
function showHide(btnClicked) { 
 
    if ($(btnClicked).val() == "Clear All") { 
 
    $("input[type='button']").removeClass('active'); 
 
    $("div.row").show(); 
 
    hideAllDivs = true; 
 
    return; 
 
    } 
 
    
 
    if (hideAllDivs) { 
 
    hideAllDivs = false; 
 
    $("div.row").hide(); 
 
    } 
 
    
 
    $(btnClicked).addClass('active'); 
 
    $("input[value='" + $(btnClicked).val() + "']").closest('div.row').slideDown(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="col-lg-2 col-md-12"> 
 
    <a id="clear-selection" class="clear-selection">Clear Selections</a> 
 
</div> 
 
<div class="col-lg-10 col-md-12 selectable-buttons-container"> 
 

 
    <input type="button" value="Button 1" class="btn btn-sm btn-selectable-blue" onclick="showHide(this);" /> 
 
    <input type="button" value="Button 2" class="btn btn-sm btn-selectable-blue" onclick="showHide(this);" /> 
 
    <input type="button" value="Button 3" class="btn btn-sm btn-selectable-blue" onclick="showHide(this);" /> 
 
    <input type="button" value="Button 4" class="btn btn-sm btn-selectable-blue" onclick="showHide(this);" /> 
 
    <input type="button" value="Button 5" class="btn btn-sm btn-selectable-blue" onclick="showHide(this);" /> 
 
    <input type="button" value="Button 6" class="btn btn-sm btn-selectable-blue" onclick="showHide(this);" /> 
 
    <input type="button" value="Button 7" class="btn btn-sm btn-selectable-blue" onclick="showHide(this);" /> 
 
    <input type="button" value="Clear All" class="btn btn-sm btn-selectable-blue" onclick="showHide(this);" /> 
 
</div> 
 

 
<div class="row" style="padding-top: 30px;"> 
 
    <div class="col-lg-10 col-lg-offset-2 col-md-12 col-sm-12 col-xs-12"> 
 

 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 dynamic-divs"> 
 
     <div class="col-lg-2 col-md-2 col-sm-3 col-xs-12" style="padding-left: 0; padding-right: 0"> 
 
     <input type="button" value="Button 6" class="btn btn-sm btn-dynamic-blue" /> 
 
     <input type="button" value="Button 2" class="btn btn-sm btn-dynamic-gray" /> 
 
     </div> 
 
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> 
 
     <p class="dynamic-div-title">Div Title</p> 
 
     <p class="dynamic-div-text">Div Text</p> 
 
     <p class="dynamic-div-link">See Other Versions <img src="images/arrow-right.png" alt="Arrow"></p> 
 
     </div> 
 

 
     <div class="col-lg-6 col-md-6 col-sm-5 col-xs-12"> 
 
     <button class="btn dynamic-div-btn"><img src="images/arrow-right-white.png" class="pull-right" alt="Arrow"> Download</button> 
 
     <p class="hardened-images">This is some example paragraph</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div> 
 

 
<div class="row"> 
 
    <div class="col-lg-10 col-lg-offset-2 col-md-12 col-sm-12"> 
 

 
    <div class="col-lg-12 col-md-12 col-sm-12 dynamic-divs"> 
 
     <div class="col-lg-2 col-md-2 col-sm-3" style="padding-left: 0; padding-right: 0"> 
 
     <input type="button" value="Button 3" class="btn btn-sm btn-dynamic-blue" /> 
 
     </div> 
 
     <div class="col-lg-4 col-md-4 col-sm-4"> 
 
     <p class="dynamic-div-title">Div Title</p> 
 
     <p class="dynamic-div-text">Text</p> 
 
     <input type="button" value="See Other Versions" class="dynamic-div-link"><img src="images/arrow-right.png" alt="Arrow"></input> 
 
     </div> 
 

 
     <div class="col-lg-6 col-md-6 col-sm-5"> 
 
     <button class="btn dynamic-div-btn"><img src="images/arrow-right-white.png" class="pull-right" alt="Arrow"> Download</button> 
 
     <p class="hardened-images">This is second example paragraph</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div>

出典

2017-02-20 09:26:40

これも同様です。しかし、@ KARCが答えたように、これはウェブページ全体のコンテンツを隠しています。なぜそれが言えるのですか？ –

それは完全に動作します。ありがとう –

ボタンにdata-target="..."を追加してクリックすると、ボタンターゲットクラスを持つこれらのコンテンツが表示されます。

$(document).ready(function() { 
 
    $('button').click(function() { 
 
    var pars = $('#contents p'); 
 

 
    if ($(this).data('target') == 'all') { 
 
     pars.show(); 
 
    } else { 
 
     if ($('#contents p:visible').length == pars.length) { 
 
     pars.hide(); 
 
     } 
 

 
     $('#contents p.' + $(this).data('target')).show(); 
 
    } 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button data-target="b1">B1</button> 
 
<button data-target="b2">B2</button> 
 
<button data-target="b3">B3</button> 
 
<button data-target="all">Clear</button> 
 
<hr/> 
 

 
<div id="contents"> 
 
    <p class="b1">Content with B1</p> 
 
    <p class="b2">Content with B2</p> 
 
    <p class="b1">Content with B1</p> 
 
    <p class="b3">Content with B3</p> 
 
    <p class="b1">Content with B1</p> 
 
    <p class="b2">Content with B2</p> 
 
    <p class="b1">Content with B1</p> 
 
    <p class="b3">Content with B3</p> 
 
    <p class="b1">Content with B1</p> 
 
</div>

出典

2017-02-20 09:16:19 Justinas

のために何かを尋ねた何を与える： https://jsfiddle.net/StarStep/vbc9h4tp/3/

function filtercontent(searchfor, where) { 
    $(where).each(function() { 
    var divtags = ''; 
    if(typeof searchfor == 'undefined') { 
     $(this).slideDown(); 
     return true; 
    } 
    $(this).find('.filterinput').each(function() { 
     divtags += this.value + ' '; 
    }); 
    if (divtags.indexOf(searchfor) < 0) { 
     $(this).slideUp(); 
    } else { 
     $(this).slideDown(); 
    } 
    }); 
} 
$('.filterme').click(function() { 
    filtercontent(this.value, '.row'); 
});

出典

2017-02-20 09:27:09 KARC

これはちょっとした作品です。しかし、私がボタンを押すと、すべてのコンテンツが消えます（ヘッダー、フッター、コンテンツ...すべて）。なぜそれが言えるのですか？ –

これは私の間違いだとわかりました。助けてくれてありがとう。 –

私はちょうど1つの項目の唯一の結果を見た。クリアな選択がクリックされるまで、クリックごとに機能するように、どのように変更することができますか？例えば、誰かがボタン1をクリックすると、ボタン1の内容のみが表示されます。ボタン2をクリックすると、ボタン1とボタン2の両方の結果が表示されます。 –

あなたはjQueryのは必ずしも必要ありません。それは純粋なJSで解決することができます。あなたがそう

元

を操作することがより理解し、簡単にあなたのアーキテクチャを設定し、あなたのhtmlの行にいくつかの特定のクラスやname属性を追加する必要があります：最初のいくつかのアドバイスで

<script> 
     var selectBtns = document.getElementsByClassName('btn-selectable-blue'); 
     var rows = document.getElementsByClassName('row'); 
     for (var i = 0; i < selectBtns.length; i++) { 
      selectBtns[i].addEventListener('click', function() { 
       var patternToFind = this.value; 
       for (var j = 1; j < rows.length; j++) { 
        var currentStr = rows[j].innerHTML; 
        var containsDesired =currentStr.indexOf(patternToFind); 
        if (containsDesired != -1) { 
         rows[j].innerHTML = ""; 
        } 
       } 
      }); 
     } 
</script>

出典

2017-02-20 09:31:08 NDFA

。 ...スペースで入力値を設定する

避けてください： EX

<input type="button" value="button_1" class="btn btn-sm btn-selectable-blue" />

あなたはこれらの情報を掲示する必要がある場合は、あなたの入力

練習にname属性とidを追加：jqueryのLIBがロードされていることを考えると、 $で呼び出し可能です。すべての行は、 "display：none;"のような属性スタイルを持っていなければなりません。ボタン入力に追加： onclick = "$（ '+' this.value）.show（）" これは動力学的にすべてを表示しますクラスには入力値があります。それはあなたがしたいことを始める方法です。

出典

2017-02-20 09:41:55

JavaScriptを使用してコンテンツをフィルタリングする方法

答えて

関連する問題