我如何使用JavaScript過濾內容

Question

我真的需要你的幫助。

我有一個具有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> 

而且，我有許多（超過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，我會顯示所有列中按鈕1或按鈕3列出的行等，直到有人按下清除選擇，然後它回到默認值（所有行顯示）。

有人可以幫助我，並告訴我一種方法，我可以做到這一點？

我認爲這可以用jQuery或純JS完成。我試圖做到這一點，我有一些代碼，但說實話，我甚至沒有接近我需要的東西，所以我想問問你希望有人能幫助我。

Answer 1

請嘗試以下代碼。這會給你你問什麼:)

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>

Answer 2

只需將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>

Answer 3

像這樣的事情應該滿足您的需求是確定： 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'); 
}); 

Answer 4

你不需要jQuery的必然。它可以在純JS中解決。

<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> 

Answer 5

起初一些建議： 你將需要一些特定的類或名稱屬性添加到您的HTML行，以便設置您的架構更容易理解，更容易操縱

前

。 ...

避免設置輸入值與空間： 前

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

如果您需要發佈這些信息name屬性和id添加到您的輸入

做法： 考慮到jQuery的lib中被加載，並用$來調用。 所有的行必須有一個屬性樣式，如「display：none;」，然後在按鈕輸入上加上： onclick =「$（'。'+ this.value）.show（）」 這將動態顯示所有行有輸入值作爲類。 這是一種開始你想要做的事情的方法。