Javascript 用按钮排序

我想这样，当你点击其中一个按钮时，除了以那个字母开头的单词外，所有其他单词都消失了。我对javascript非常陌生，不知道如何做到这一点

原子吸收光谱

巴斯

中科院

达斯

eas

fas

煤气

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

获取div中所有元素的列表。为此，您应该给div一个id，然后使用“document.getElementById（“yourDIVid”）.childNodes”获取其中的元素

循环遍历这些元素。对于每个元素，查看其文本属性是否以单击的字母开头

为了做到这一点，你首先需要得到你点击的按钮。可以将事件侦听器附加到元素：其中一个是onclick事件。您应该执行一些函数，显示以按钮字母开头的所有元素

检查元素的第一个字母是否为按钮的第一个字母。如果是，请使其可见。否则，让它隐形。（element.style.display=“无”|“块”）

就这样

下面是一些伪代码：

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

函数showElementsStartingWith（集装箱ID、字母）{
document.getElementById（containerId）.childNodes.forEach（函数（值）{
value.style.display=value.text.startsWith（字母）？“块”：“无”；
});
}

---

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

试试这样的

$（'.btn'）。单击（函数（a）{
var filt=this.value.toLowerCase（）；
$（'divp'）.hide（）；
$（“div p”）。每个（函数（）{
var，该值=$（此值）；
var text=that.text（）；
if（text.startsWith（filt））
show（）；
});
});

原子吸收光谱

巴斯

鲈鱼

中科院

卡斯

达斯

eas

fas

煤气

这里是一个仅使用javascript的解决方案


var inputs=document.getElementsByTagName（“输入”）；
对于（变量i=0；i


原子吸收光谱

巴斯

中科院

达斯

eas

fas

煤气


原子吸收光谱

巴斯

中科院

达斯

eas

fas

煤气

函数searchval（n）
{
var s=n.值；
var wordsele=document.getElementById（“words”）；
var words=wordsele.getElementsByTagName（“p”）；
var re=新的RegExp（“^”+s，“i”）；
for（变量i=0，ele；ele=words[i]；i++）
{
var myword=ele.innerHTML；
words[i].style.display=（！myword.match（re））？“无”：“块”；
}
}
编辑：已更新，因此段落将折叠，而不是停留在原来的位置

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


单击的函数（元素）{
var everyChild=document.querySelectorAll（“#包装器p”）；
for（var i=0；i

输入{
文本转换：大写；
}
.noDisplay{display:none；}

aas
bas
cas
das
eas
fas
气体

使用
getElementsByTagName（“P”）
可适当设置
元素的
隐藏属性。这可以正常工作，但所有文本都保持在其原始位置，而不是向下折叠。@user3503074要获得要向下折叠的文本，请在CSS中使用
显示：无
而不是
可见性：隐藏
。我已经为你更新了。请单击“我的答案”旁边的绿色复选框，如果它对您有效，请接受它，以便其他人可以快速找到此解决方案，谢谢。您是否将favascript放在页面底部？你犯了什么错误
<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>