Javascript 如何切换组列表中突出显示的选定项目

How to toggle a highlighted selected item in a group list

提问by Andrew Simpson

I have this in using Bootstrap:

我在使用 Bootstrap 时有这个：

    <ul class="list-group">
        <li  class="list-group-item active">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Vestibulum at eros</li>
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Vestibulum at eros</li>
    </ul>

The top row is selected.

顶行被选中。

I only ever want to show to the User 1 selected row.

我只想向用户 1 显示选定的行。

I can raise an event when the User clicks on a row by adding a function to a Click-Event using Javascript.

当用户单击一行时，我可以通过使用 Javascript 向 Click-Event 添加一个函数来引发一个事件。

I can then set that Row to be Active. but what happens is that the previous selected Row needs to be deselected.

然后我可以将该行设置为活动。但发生的情况是需要取消选择上一个选定的行。

What is the accepted way to do this?

这样做的公认方法是什么？

How do I enumerate and access each row to change its Class settings?

如何枚举和访问每一行以更改其类设置？

Is there a better CSS way to do this?

有没有更好的 CSS 方法来做到这一点？

ADDITIONAL All these methods work (thanks everyone) but if I have more than 1 option group on my page how can I explicitly remove the active highlighted row on the one I am using?

附加所有这些方法都有效（谢谢大家），但是如果我的页面上有 1 个以上的选项组，我该如何明确删除我正在使用的那个活动突出显示的行？

回答by Sahan

Here we go buddy. I have made a JSfiddle for ya

来吧，伙计。我为你做了一个 JSfiddle

demo

演示

$(function(){
    console.log('ready');

    $('.list-group li').click(function(e) {
        e.preventDefault()

        $that = $(this);

        $that.parent().find('li').removeClass('active');
        $that.addClass('active');
    });
})

JSFiddle updated to have more than one Group

JSFiddle 更新为有多个组

http://jsfiddle.net/mgjk3xk2/1/

http://jsfiddle.net/mgjk3xk2/1/

回答by Jevgeni

If you'd be using jQuery, it looks like this:

如果你使用 jQuery，它看起来像这样：

$(".list-group .list-group-item").click(function(e) {
   $(".list-group .list-group-item").removeClass("active");
   $(e.target).addClass("active");
});

回答by Yohn

var $lis = $('.list-group li')
$lis.on('click', function(){
  $lis.removeClass('active')
  $(this).addClass('active')
})

回答by Rik_S

I would use javascript to first find the first element within your list-group element that has the "active class", then remove that class. When you've done that, you can then proceed to add the active class to the element you clicked on.

我会使用 javascript 首先找到列表组元素中具有“活动类”的第一个元素，然后删除该类。完成后，您可以继续将活动类添加到您单击的元素。

This can be done with jQuery's .addClass() and .removeClass() functionality.

这可以通过 jQuery 的 .addClass() 和 .removeClass() 功能来完成。

回答by Iraj

just another way that i think this is a better way:

只是另一种方式，我认为这是一个更好的方式：

$(document).off("click" ,".list-group .list-group-item").on("click" ,".list-group .list-group-item" ,function(){

    $(this).sibbling().removeClass("active");
    $(this).addClass("active");
});

回答by MX313

This works for me...

这对我有用...

$(document).off("click", ".list-group .list-group-item").on("click", ".list-group .list-group-item", function () {
    try {
        $(".list-group .list-group-item").removeClass("active");
    } catch (e) { }

    $(this).addClass("active");
});

回答by Lehonti

I made a solution using CSS only (no JavaScript). However, it doesn't work with standard <ul>and <li>HTML tags. In other words, the result will look like a Boostrap list group in style only, but won't be an HTML list, semantically speaking.

我只使用 CSS（没有 JavaScript）做了一个解决方案。但是，它不适用于标准<ul>和<li>HTML 标签。换句话说，结果在样式上看起来像一个 Boostrap 列表组，但在语义上不会是一个 HTML 列表。

It's a shame that CSS doesn't have a :parent selector, and the :has selector cannot be used within stylesheets, which would help us achieve what you are suggesting.

遗憾的是，CSS 没有 :parent 选择器，并且:has 选择器不能在样式表中使用，这将有助于我们实现您的建议。

If you are okay with trading semantically-broken code for your desired style, my solution will certainly help you.

如果您可以为您想要的风格交易语义破坏的代码，我的解决方案肯定会帮助您。

It boils down to hiding an <input type="radio" />element, but not its <label>, and then using a CSS pseudo-selector in order to make the list element change its style when the radio button is selected.

它归结为隐藏一个<input type="radio" />元素，而不是它的<label>，然后使用 CSS 伪选择器使列表元素在选择单选按钮时更改其样式。

The basic CSS would be:

基本的 CSS 将是：

.list-group input[type="radio"] {
  display: none;
}

.list-group input[type="radio"]:checked + .list-group-item {
  background-color: #0275D8;
  color: #FFF;
}

And the basic HTML would be:

基本的 HTML 将是：

<div class=""list-group>
  <input type="radio" name="RadioInputName" value="Value1" id="Radio1" />
  <label class="list-group-item" for="Radio1">Caption for Radio1</label>
</div>

Here's a CodePen in case you want to see the code in action: https://codepen.io/lehonti/pen/OzoXVa

这是一个 CodePen，如果您想查看实际运行的代码：https://codepen.io/lehonti/pen/OzoXVa

回答by Dmitrii Korolkov

Probably bootstrap cannot it. You can use our own class name and write our own css similarly as in bootstrap.

可能引导程序不能。您可以使用我们自己的类名并编写我们自己的 css，就像在 bootstrap 中一样。

For example:

例如：

.choised > span { color: #DDDDDD; }

.choised > span { color: #DDDDDD; }