0

另一个新手问题...

脚本（如下）将一个 div 中的选定文本与另一个 div 中的一些目标文本进行比较，然后将样式应用于第二个 div 的父级。我需要将脚本更改为不那么直白——而不是“如果选择了 A，则查找 A”；而是“如果选择 Apples，则查找 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");
});
4

3 回答 3

1

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

例子：

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

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

于 2011-08-09T18:42:14.213 回答
0

使用数据属性

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]

于 2011-08-09T18:40:15.647 回答
0

如果你不想使用 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");
}

注意：它更多的网络标准来设置idmenu-table而不是menutable:)

于 2011-08-09T20:37:46.357 回答