Question

我想这样做，当你点击其中一个按钮时，除了以该字母开头的单词外，所有其他单词都会消失。我是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>

Answer 1

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

获取div中所有元素的列表。要做到这一点，你应该给你的div一个id，然后用＆＃34; document.getElementById（＆＃34; yourDIVid＆＃34;）。childNodes＆＃34;。
循环遍历这些元素。对于每个元素，查看其文本属性是否以您单击的字母开头。
1. 为了实现这一目标，您首先需要获得您点击的按钮。您可以将事件侦听器附加到元素：其中一个是onclick事件。您应该执行一些函数，显示以按钮字母开头的所有元素。
1. 检查元素的第一个字母是否是按钮之一。如果是，请将其显示。否则，让它看不见。（element.style.display =＆＃34; none＆＃34; |＆＃34; block＆＃34;）
多数民众赞成！

这里有一些伪代码：

<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')">

这是一个原始但有效的例子。希望它有所帮助。

Answer 2

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

$('.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>

Answer 3

这是一个仅限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>

Answer 4

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

Answer 5

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

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

＆＃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;

按钮排序

5 个答案: