javascript - 不允许用户输入相同的关键字，有时有效，有时无效，jquery

Question

我正在尝试创建一个不允许用户输入相同关键字的程序，我简化了我的代码，如下所示，我做错了什么？有时它有效，但有时它会认为每个关键字都是相同的。

$(".tag_link").click(function(event){
    event.preventDefault();
    var href = $.trim($(this).attr('href'));//trim href value
    var txtToMatch = $('.result_tag').text();//must be a class, becuase id represent one.
    var iMatch = txtToMatch.indexOf(href); 
  
    if (iMatch !== -1 ) {
        //same keywords, not allow to enter
        // put action here
        alert('same keyword');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="result_tag" href="apple">apple</a>
<a class="result_tag" href="berry">berry</a>
<a class="result_tag" href="banana">banana</a>

<div>
    <a class="tag_link" href="apple">apple</a>
    <a class="tag_link" href="watermelon" >watermelon</a>
</div>

Answer 1

问题是因为 text() 方法只会返回集合中第一个匹配项的文本，而不是所有这些项的连接。为了解决这个问题，您可以使用 map() 创建文本值数组，然后使用 indexOf 查找该数组中的特定项目。试试这个:

$(".tag_link").click(function(event){
    event.preventDefault();
    var href = $.trim($(this).attr('href'));
    var txtToMatch = $('.result_tag').map(function() {
        return $(this).text();
    }).get();
  
    if ($.inArray(href, txtToMatch) !== -1 ) {
        // same keywords, not allow to enter
        // put action here
        alert('same keyword');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="result_tag" href="apple">apple</a>
<a class="result_tag" href="berry">berry</a>
<a class="result_tag" href="banana">banana</a>

<div>
    <a class="tag_link" href="apple">apple</a>
    <a class="tag_link" href="watermelon" >watermelon</a>
</div>