按钮排序

时间:2015-03-28 22:28:26

标签: javascript html

我想这样做,当你点击其中一个按钮时,除了以该字母开头的单词外,所有其他单词都会消失。我是javascript的新手,不知道该怎么做。

<div>
  <input type="button" class="btn" value="A">
  <input type="button" class="btn" value="B">
  <input type="button" class="btn" value="C">
  <input type="button" class="btn" value="D">
  <input type="button" class="btn" value="E">
  <input type="button" class="btn" value="F">
  <input type="button" class="btn" value="G">
</div>

<div>
<p>aas</p>
<p>bas</p>
<p>cas</p>
<p>das</p>
<p>eas</p>
<p>fas</p>
<p>gas</p>
</div>

5 个答案:

答案 0 :(得分:0)

有多种方法可以解决您的问题。一个可能是:

  1. 获取div中所有元素的列表。要做到这一点,你应该给你的div一个id,然后用&#34; document.getElementById(&#34; yourDIVid&#34;)。childNodes&#34;。

  2. 获取其中的元素。
  3. 循环遍历这些元素。对于每个元素,查看其文本属性是否以您单击的字母开头。

    1. 为了实现这一目标,您首先需要获得您点击的按钮。您可以将事件侦听器附加到元素:其中一个是onclick事件。您应该执行一些函数,显示以按钮字母开头的所有元素。
    1. 检查元素的第一个字母是否是按钮之一。如果是,请将其显示。否则,让它看不见。 (element.style.display =&#34; none&#34; |&#34; block&#34;)
  4. 多数民众赞成!

  5. 这里有一些伪代码:

    <script>
    function showElementsStartingWith(containerId, letter){
        document.getElementById(containerId).childNodes.forEach(function(value){
            value.style.display = value.text.startsWith(letter)?"block":"none";
        });
    }
    </script>
    
    <!-- Modify your buttons -->
    <input type="button" class="btn" value="A"     onclick="showElementsStartingWith('myDIV', 'A')">
    
  6. 这是一个原始但有效的例子。希望它有所帮助。

答案 1 :(得分:0)

尝试这样的事情......

$('.btn').click(function(a) {
  var filt = this.value.toLowerCase();
  $('div p').hide();
  $("div p").each(function() {
    var that = $(this);
    var text = that.text();
    if (text.startsWith(filt))
      that.show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div>
  <input type="button" class="btn" value="A">
  <input type="button" class="btn" value="B">
  <input type="button" class="btn" value="C">
  <input type="button" class="btn" value="D">
  <input type="button" class="btn" value="E">
  <input type="button" class="btn" value="F">
  <input type="button" class="btn" value="G">
</div>

<div>
  <p>aas</p>
  <p>bas</p>
  <p>bass</p>
  <p>cas</p>
  <p>cass</p>
  <p>das</p>
  <p>eas</p>
  <p>fas</p>
  <p>gas</p>
</div>

答案 2 :(得分:0)

这是一个仅限JavaScript的解决方案。

var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
  inputs[i].onclick = function() {
    var letter = this.value[0];
    var paras = document.getElementsByTagName("p");
    for (var j = 0; j < paras.length; j++) {
      if (paras[j].innerHTML.toUpperCase()[0] != letter.toUpperCase()) {
        paras[j].style.display = "none";
      } else {
        paras[j].style.display = "inherit";
      }
    }
  };
}
<div>
  <input type="button" class="btn" value="A">
  <input type="button" class="btn" value="B">
  <input type="button" class="btn" value="C">
  <input type="button" class="btn" value="D">
  <input type="button" class="btn" value="E">
  <input type="button" class="btn" value="F">
  <input type="button" class="btn" value="G">
</div>

<div>
  <p>aas</p>
  <p>bas</p>
  <p>cas</p>
  <p>das</p>
  <p>eas</p>
  <p>fas</p>
  <p>gas</p>
</div>

答案 3 :(得分:0)

<div>
  <input type="button" class="btn" value="A" onclick="searchval(this)">
  <input type="button" class="btn" value="B" onclick="searchval(this)">
  <input type="button" class="btn" value="C" onclick="searchval(this)">
  <input type="button" class="btn" value="D" onclick="searchval(this)">
  <input type="button" class="btn" value="E" onclick="searchval(this)">
  <input type="button" class="btn" value="F" onclick="searchval(this)">
  <input type="button" class="btn" value="G" onclick="searchval(this)">
</div>

<div id="words">
<p>aas</p>
<p>bas</p>
<p>cas</p>
<p>das</p>
<p>eas</p>
<p>fas</p>
<p>gas</p>
</div>

<script type="text/javascript">
function searchval(n)
{
    var s = n.value;
    var wordsele = document.getElementById("words");
    var words = wordsele.getElementsByTagName("p");
    var re = new RegExp("^" + s, "i");
    for (var i = 0, ele; ele = words[i]; i++)
    {
        var myword = ele.innerHTML;
        words[i].style.display = (!myword.match(re)) ? "none" : "block";
    }
}
</script>

答案 4 :(得分:0)

修改 已更新,因此这些段落会折叠而不是停留在原来的位置。

这是一个有效的JavaScript解决方案。为每个按钮提供onclick个事件侦听器。单击时执行clicked( element )功能。此函数隐藏div中的所有元素,为其提供具有noDisplay规则的display:none类。然后我们检查段落的第一个字母是否与按钮的值匹配。如果找到匹配项,则该段落可见。希望这有帮助!

&#13;
&#13;
function clicked( element ){
  var everyChild = document.querySelectorAll( '#wrapper p' );
  for( var i = 0; i < everyChild.length; i++ ){
    everyChild[ i ].classList.add( 'noDisplay' );
  } 
  
  for( var i = 0; i < everyChild.length; i++ ){
    if( element.value == everyChild[ i ].innerHTML.slice( 0, 1 ) ){
      everyChild[ i ].classList.remove( 'noDisplay' )
    }
  }
}
&#13;
input{
  text-transform:uppercase;
 }

.noDisplay{ display:none; }
&#13;
<div>
  <input type="button" class="btn" value="a" onclick="clicked( this )">
  <input type="button" class="btn" value="b" onclick="clicked( this )">
  <input type="button" class="btn" value="c" onclick="clicked( this )">
  <input type="button" class="btn" value="d" onclick="clicked( this )">
  <input type="button" class="btn" value="e" onclick="clicked( this )">
  <input type="button" class="btn" value="f" onclick="clicked( this )">
  <input type="button" class="btn" value="g" onclick="clicked( this )">
</div>

<div id="wrapper">
<p id ="aas">aas</p>
<p id="bas">bas</p>
<p id="cas">cas</p>
<p id="das">das</p>
<p id="eas">eas</p>
<p id="fas">fas</p>
<p id="gas">gas</p>
</div>
&#13;
&#13;
&#13;