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

问题在于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

Answer 2

您可以使用:contains选择器执行此操作：

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

第一部分将名称从任何情况转为大写，以便我们可以与.hover-name
第二部分将根据找到的元素选择包含该单词的所有元素，并toggle该类处于活动状态。

jquery查找图像标题属性并切换列表项

2 个答案: