JQuery, как сопоставить две текстовые строки, не изменяя либо? - PullRequest
Новая
       35

JQuery, как сопоставить две текстовые строки, не изменяя либо?

0 голосов
/ 09 августа 2011

Еще один вопрос новичка ...

Сценарий (ниже) сравнивает выделенный текст в одном div с некоторым целевым текстом в другом, а затем применяет стиль к родителю второго div.Мне нужно изменить сценарий, чтобы он был менее буквальным - не "если выбран A, ищите A";скорее, «если выбраны яблоки, ищите A».

Итак, как вы можете заставить jQuery распознавать две разные текстовые строки как одно и то же?Я попытался "var A = 'Apples', B = 'Bravo' [etc];", но затем класс добавляется в .embox, когда я наводю курсор на любой #menutable div.

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");
});

Ответы [ 3 ]

1 голос
/ 09 августа 2011

Вы можете попробовать использовать метод jQuery inArray () , чтобы увидеть, находится ли значение в массиве значений, которые вы определяете.

Пример: 

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

В вашем коде проверьте, возвращает ли функция что-то большее, чем -1. Дополнительную информацию можно найти в документах jQuery, указанных выше.

0 голосов
/ 10 августа 2011

если вы не хотите использовать данные 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");
}

примечание: егобольше веб-стандарта для установки идентификатора, например menu-table вместо menutable:)

0 голосов
/ 09 августа 2011

Использовать атрибуты данных

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]

...