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数据 - *，可以使用

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而不是menutable的更多网络标准：）

jQuery如何匹配两个文本字符串而不改变？

3 个答案: