javascript - 如何使用 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>

现在，我需要做的基本上是一个过滤器，即当有人按下按钮 1 时，我将只显示其内容中包含按钮 1 的所有行。

然后，如果有人按下按钮 3，我将显示其中列出了 BUTTON 1 或 BUTTON 3 的所有行等，直到有人按下 CLEAR SELECTION，然后它恢复为默认值(显示所有行)。

有人可以帮助我并告诉我完成此操作的方法吗？

我认为这可以用 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>