jQuery 如何在不改变任何一个的情况下匹配两个文本字符串？

Question

另一个新手问题...

脚本（如下）将一个 div 中的选定文本与另一个 div 中的某些目标文本进行比较，然后将样式应用于第二个 div 的父级。我需要将脚本更改为不那么字面意义——而不是“如果选择了 A，则查找 A”；而是“如果选择了苹果，则寻找 A”。

那么，如何让 jQuery 将两个不同的文本字符串识别为同一事物呢？我尝试了“var A = 'Apples', B = 'Bravo' [etc] ;”，但是当我将鼠标悬停在任何 #menutable div 上时，该类会添加到 .embox 中。

HTML：

    <div id="maintable">
     <div class="embox">
      content
      <div class="options">A,B,C</div>
     </div>
     <div class="embox">
      content
      <div class="options">B,F</div>
     </div>
     <!-- and about a hundred more just like these -->
    </div>

    <div id="menutable">
     <div class="optionA">Apples</div>
     <div class="optionB">Bravo</div>
     <div class="optionC">Comp</div>
     <div class="optionF">Ferengi</div>
    </div>

当前脚本（不起作用）：

$('#menutable div').hover(function() {
    var that = this, A = "Apples", B = "Bravo", C = "Comp", F = "Ferengi";
    $('#maintable .options').filter(function() {
        return $(this).text().indexOf($(that).text()) === -1;
    }).closest(".embox").addClass("bgtransp");
},
function() {
    $(".embox").removeClass("bgtransp");
});

Answer 1

您可以尝试使用 jQuery 的 inArray() 方法来查看该值是否在数组内您定义的值。

示例：

$.inArray($(this).html(), ['Apples', 'A', 'Orange']);

在您的代码中，检查函数返回的值是否大于 -1。更多信息可以在上面链接的 jQuery 文档中找到。

Answer 2

使用数据属性

HTML

div id="menutable">
 <div class="option" data-letter="A">Apples</div>
 <div class="option" data-letter="B">Bravo</div>
 <div class="option" data-letter="C">Comp</div>
 <div class="option" data-letter="D">Ferengi</div>
</div>

JS

$('#menutable div').hover(function() {
    var that = this;
    $('#maintable .options').filter(function() {
        return $(this).text().indexOf($(that).data('letter')) === -1;
        //seems to be !== -1 
    }).closest(".embox").addClass("bgtransp");
},
function() {
    $(".embox").removeClass("bgtransp");
});

此外，您可以使用 stringname[0] 从字符串中获取第一个字母

Answer 3

如果您不想使用 HTML5 data-*，您可以使用

var myArray = ['Apples', 'A', 'Orange'];
var i=0;
$("#menutable > .option").each(
   function(){
     $(this).data("myOption",myArray[i]);
     i++;
});

并使用 获取数据

$('#menutable > .option').click(function() {
   var myOption = $(this).data("myOption");
}

注意：设置 id 更符合网络标准，如 menu-table 而不是 <代码>可菜单:)