如何使用 jquery 突出显示选定的列表项？答案

【问题标题】：How can I highlight a selected list item with jquery?如何使用 jquery 突出显示选定的列表项？
【发布时间】：2013-02-24 10:22:03
【问题描述】：

我在一个列表中有几个项目，并希望通过应用一些 css 样式（可能是背景颜色等）来突出显示用户单击的项目。

我的 HTML 如下所示：

<ul class="thumbnails">
    <li>
        <a href="#" class="thumbnail">
            <img class="giftthumb" src='thumb1.jpg' alt="">
            <span class="gifttitle">Thumb1</span>
        </a>    
    </li>
    <li>
        <a href="#" class="thumbnail">
            <img class="giftthumb" src='thumb2.jpg' alt="">
            <span class="gifttitle">Thumb3</span>
        </a>    
    </li>
    <li>
        <a href="#" class="thumbnail">
            <img class="giftthumb" src='thumb3.jpg' alt="">
            <span class="gifttitle">Thumb3</span>
        </a>    
    </li>
</ul>

jQUery 检索所选项目：

$('.thumbnail').click(function(e) {
    e.preventDefault();

    ???

})

【问题讨论】：

标签： javascript jquery dom-manipulation

【解决方案1】：

如果您不需要需要 active 保持持久，这是一种 CSS 方式：

li:focus{
  background: red;
}
li:active{
  background: gold;
}

<ul>
  <li tabindex="1">Item 1</li>
  <li tabindex="1">Item 2</li>
  <li tabindex="1">Item 3</li>
</ul>

Now click <b>here</b> and see why it's not persistent.

在某些情况下，上述内容可能很有用 - 仅突出显示当前的“点击活动”项目...

【讨论】：

【解决方案2】：

您可以使用 jQuery 的 class management methods（在这种情况下为 addClass() 和 removeClass()）在所选项目上添加一个类并从所有其他项目中删除相同的类（如果您只想在一个时间）。

//save class name so it can be reused easily
//if I want to change it, I have to change it one place
var classHighlight = 'highlight'; 

//.click() will return the result of $('.thumbnail')
//I save it for future reference so I don't have to query the DOM again
var $thumbs = $('.thumbnail').click(function(e) {
    e.preventDefault();
    //run removeClass on every element
    //if the elements are not static, you might want to rerun $('.thumbnail')
    //instead of the saved $thumbs
    $thumbs.removeClass(classHighlight);
    //add the class to the currently clicked element (this)
    $(this).addClass(classHighlight);
});

然后在你的 CSS 中添加：

.highlight {
    background-color: cyan;
    font-weight: bold;
}

jsFiddle Demo

这是一个比直接从 jQuery/Javascript 更改 CSS 属性更好的解决方案（例如使用 .css() 方法），因为关注点分离将使您的代码更易于管理和可读。

【讨论】：

我从未见过像这样将变量分配给函数的语法...（例如 $thumbs = ）
@Paul 我添加了一些 cmets 来解释这一举动。 $thumbs 将基本上保存$('.thumbnail') 的结果，因为在 jQuery 中大多数方法将返回 jQuery 集合以允许链接。我这样做是因为在单击处理程序中，我不必再次查询 DOM 以获取 .thumbnail 元素，我已经有了它们。如果元素在变化（我的意思是添加/删除），所以不是静态的，这个方法不能用，你应该再次查询 DOM。
非常好，感谢您提供的信息。我一直在这个网站上学习:)
使用 e.preventDefault();它为我停止了页面导航？？任何其他解决方案@kapa
@htiru 然后不要在页面导航上使用它。在需要突出显示的项目上使用它。

【解决方案3】：

你的？？？应该是：

$('.thumbnail').removeClass('selected');
$(this).addClass('selected');

那么你所要做的就是定义你的'selected' css 类。

【讨论】：

【解决方案4】：

$('.thumbnail').click(function(e) {
    e.preventDefault();
    $(this).css('background-color', 'red');
})

【讨论】：