Javascript 单击li元素后，如何更改其背景？

我看到了这样一个帖子：

它看起来就像我在寻找的东西；但对于如何在rails应用程序（也使用react/redux）中执行同样的操作，我有点困惑。在我迄今为止开发的rails应用程序中，我还没有看到任何jquery，因此我不确定在哪里/如何实现相同的想法。感谢您的帮助

我考虑过对li元素使用

onClick

事件，然后创建一个函数，向单击的元素添加一个类/从所有其他li元素中删除该类，但我不确定这是否正确

//这是呈现ul元素的组件

import React from 'react';
import TrackIndexItem from './track_index_item';

const TrackDetail = ({ tracks }) => (
  <ul>
    { tracks.map(track => <TrackIndexItem key={ track.id } track={track} />) } 
  </ul>
);

export default TrackDetail;

---

匿名函数示例

$（函数（）{
$（“li”）。单击（功能（e）{
$（“.clicked”）.removeClass（）；
$（此）.addClass（“单击”）；
});
});
。单击{
边框：1px实心#CCC；
边界半径：3px；
}


{track.title}

{track.artist}•{track.album}



{track.title}

{track.artist}•{track.album}



{track.title}

{track.artist}•{track.album}


这是我同时创建的纯JS版本。也可在CodePen上获得：

因为您使用的是React，所以可以做一些与代码示例不同的事情，并直接在JSX中添加onClick（）

const TrackIndexItem = ({ track }) => ( 
  <li onClick={e => highlight(e)}>
    ...
  </li>
);

这些函数都可以添加到TrackIndexItem组件文件中
removeClass（）
和
addClass（）
足够通用，可以移动到包含帮助程序/实用程序函数的文件中，并导入到TrackIndexItem文件中（如果愿意）

工作代码片段：


//使用纯JS，不使用jQuery
const list=document.getElementById（'trackList'）；
const items=list.querySelectorAll（'li'）；
items.forEach（（项目）=>{
item.onclick=（e）=>突出显示（e）；
});
功能突出显示（e）{
targetItem=e.target；
//从所有项中删除该类
items.forEach（（项目）=>{
removeClass（项目“活动”）；
});
//将类添加到“单击”项中
addClass（targetItem，“活动”）；
}
函数removeClass（项，类值）{
classList=项.className.split（“”）；
item.className=classList.filter（item=>item！==classVal）.join（“”）；
}
函数addClass（项，类值）{
classList=项.className.split（“”）；
//仅当该类不在列表中时才添加该类
如果（！classList.includes（classVal））{
classList.push（classVal）；
}
item.className=classList.join（“”）；
}
li{
宽度：100px；
填充物：5px；
边缘底部：5px；
}
李先生{
边框：1px纯绿色；
}
李：很活跃{
背景颜色：黄色；
}


测试1
试验2
测试3

我会使用
.addClass（）
和
.removeClass（）
。例如，如果该类被称为“clicked”，那么您可以将其从包含该类的任何
li
元素中删除，然后将其添加到被单击的元素中。啊，好吧，我也是这么想的。将它们放入我使用li标记的
onClick
事件调用的函数中是一个好主意吗？您可以这样做。我认为将其包含在Click回调的匿名函数中非常简单。您也可以在创建
标记时将
onClick（）
添加到JSX中。我已经在下面的例子中添加了这一点；对于匿名函数，我应该把它放在我的应用程序的哪个位置（哪个文件）？我猜它不应该出现在HTML或CSS中；我会把它和呈现li元素的组件放在同一个文件中吗？@Karen在你的HTML中，或者如果你有一个正在加载的JavaScript文件，那也可以。啊，谢谢你的澄清！我要试试看！我还没试过，但我会尽快让你知道/接受答案！被其他几个虫子卡住了啊哈
li {
        display: flex;
        flex-direction: row;
        padding: 0 20px;

        .track-info {
          display: flex;
          flex-direction: column;
          position: relative;

          .music-note-icon {
            position: absolute;
            content: image_url('music-note-icon.png');
            width: 10px;
            height: 15px;
            top: 20px;
          }

          .track-text {
            margin-left: 25px;

            p {
              font-family: 'ProximaNova-Regular';
            }

            p:first-of-type {
              font-size: 18px;
              color: $white;
            }

            p:last-of-type {
              font-size: 16px;
              color: $gray;
              margin-top: -15px;
            }
          }
        }
      }

const TrackIndexItem = ({ track }) => ( 
  <li onClick={e => highlight(e)}>
    ...
  </li>
);

function highlight(e) {
    const list = document.getElementById('trackList');
    const items = list.querySelectorAll('li');

    targetItem = e.target;
    ...
}