Question

我有一个单词列表

<li>name</li>
<li>myname</li>
<li>yourname</li>

我有一个输入框input type="text" value="name" id="the_value"，其值为"name"，提交按钮的标识为"submit_me"。这个的确切代码是什么。

$("#submit_me").click(function(){
    var ans = $("#the_value").val();
    var list_item = //list items that will match the inputted value;

    if(ans == list_item){
        list_item.css("color","blue");
    }

    else{
        alert("No word found on list item");
    }
})

对于输出，值为"name"的列表项将为蓝色。

Answer 1

如果您不想要完全匹配，请使用.contains（）。

https://api.jquery.com/contains-selector/

从输入中获取值。使用contains选择列表项。

如果您需要完全匹配，则伪代码：

$('li').filter(() => $(this).text('THE EXACT TEXT'))

Answer 2

您可以使用.each()循环浏览对象，并使用.text()比较内容：

$("#submit_me").click(function(){

var found = false;
var ans = $("#the_value").val()
$("#list_items li").each( function(){
    if( $(this).text() == ans ){
        $(this).css("color","blue");
        found = true;
    }
});
if ( found == false ){
    alert("No word found on list item");
}

});

期待HTML如：

<ul id="list_items">
<li>name</li>
<li>myname</li>
<li>yourname</li>
</ul>
<input type="text" name="the_value" id="the_value" />
<button id="submit_me">Submit</button>

请参阅此处的小提琴：https://jsfiddle.net/29ee12dj/

Answer 3

使用li遍历每个each()，然后在找到所需文本时更改颜色。

$("#submit_me").click(function() {
  var ans = $("#the_value").val(),
    list_item;

  $('li').each(function() {
    if ($(this).text() == ans) {
      list_item = $(this);
    }
  });

  if (list_item) {
    list_item.css("color", "blue");
  } else {
    alert("No word found on list item");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>name</li>
    <li>myname</li>
    <li>yourname</li>
</ul>

<input type="text" value="name" id="the_value">
<input type="button" id="submit_me" value="Click"/>

使用输入的值在<li>中查找确切的文本

3 个答案: