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

只需将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 2

这样的东西应该可以满足您的需求： 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 3

你不一定需要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 4

首先提出一些建议：您需要在html行中添加一些特定的类或名称属性，以便将您的架构设置为更易理解且更易于操作

离

....

避免使用空格设置输入值：前

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

如果您需要发布这些信息，请在输入中添加名称属性和ID

实践：考虑到jquery lib已加载，并且可以使用$进行调用。您的所有行必须具有类似＆＃34; display：none;＆＃34;的属性样式，然后在按钮输入上添加： onclick =＆＃34; $（＆＃39;。＆＃39; + this.value）.show（）＆＃34; 这将动态显示所有具有输入值的行作为类。这是开始你想做的事情的一种方式。

如何使用JavaScript过滤内容

4 个答案: