jquery画像のタイトル属性を検索し、リスト項目のクラスを切り替える

Question

タイトル属性と名前の別のリストを持つ画像のリストがあります。

画像上でマウスを動かすと、私は名前リストのリスト項目のcssクラスをトグルします。

私は現在のタイトルタグの価値を取らなければならず、名前リストのテキストを検索する必要があります。

 <ul class="staff-photos"> 
      <li class="standard"> 
      <%= image_tag("footer/edith_hansmann.jpg", alt: "Edith Hansmann", title: "Edith Hansmann") %> 
      </li> 
      <li class="standard"> 
      <%= image_tag("footer/christine_jean.jpg", alt: "Christine Jean", title: "Christine Jean") %> 
      </li> 
     </ul> 

     <ul class="staff-names"> 
     <li><span class="hover-name">EDITH HANSMANN</span> | Head of Design</li> 
     <li><span class="hover-name">CHRISTINE JEAN</span> | Head of Marketing</li> 

私のjavascript：

// mouse hover on staff page image toggles CSS class of staff name list item 
    $('ul.staff-photos img').hover(function() { 
    var name = $(this).attr('title'); 
    $('.hover-name').text().match(name).toggleClass('active'); 
    }); 

私は応じてリスト項目を比較すると問題がある：

$('.hover-name').text() 
"EDITH HANSMANNCHRISTINE JEAN" 

私は応じてリスト項目がトグルを受けることを達成することができますどのように？

Answer 1

spanすべての要素のテキストを1つの文字列にまとめて比較するのではなく、matchのロジックに問題があります。

あなたが推移しimg要素のtitle属性に一致text()とspan要素を見つけるためにfilter()メソッドを使用して、必要とするものを達成することができます。このお試しください：

$('ul.staff-photos img').hover(function() { 
    var name = $(this).attr('title').toLowerCase(); 
    $('.hover-name').filter(function() { 
     return $(this).text().toLowerCase() == name; 
    }).toggleClass('active'); 
}); 

Working example

Answer 2

をあなたは:containsセレクタを使ってこれを行うことができます。私たちが一致できるように

var name = $(this).attr('title').toUpperCase(); 
$('.hover-name:contains("'+ name +'")').toggleClass('active'); 

• 第一の部分は、大文字にどのような場合から名前をオンにしますすべての大文字のテキストが入っている.hover-name
• 2番目の部分はすべての要素を選択しますその単語とtoggle見つかった要素に基づいてアクティブなクラス。