jQuery的發現圖片標題屬性，並切換類根據列表項

我有圖片的標題爲屬性和名稱的單獨列表清單。jQuery的發現圖片標題屬性，並切換類根據列表項

在我上需打開名單上的列表項的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"

的根據列表項切換得到我該如何實現？

來源

2016-07-08 StandardNerd

問題在於你的邏輯圍繞着match，因爲你將所有span元素的文本放在一個字符串中，而不是單獨進行比較。

你可以達到你需要使用filter()方法來查找span元素與text()的徘徊img元素title屬性匹配什麼。試試這個：

$('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

來源

2016-07-08 08:34:21

你可以做到這一點使用:contains選擇：

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

第1部分將從任何情況下爲大寫轉名，這樣我們就可以匹配正好與內.hover-name
第二部分全部大寫文本將選擇所有的元素包含並根據找到的元素激活該類並將其激活。

來源

2016-07-08 08:35:34

jQuery的發現圖片標題屬性，並切換類根據列表項

回答

相關問題