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

Question

我看到了这篇文章： HTML <ul> | 将特定的 <li> 颜色 onclick 和同一 <ul> 中的其他 <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 元素

import React from 'react';

const TrackIndexItem = ({ track }) => ( 
  <li>
    <div className="track-info">
      <i className="music-note-icon"></i>
      <div className="track-text">
        <p>{track.title}</p> 
        <p>{track.artist} • {track.album}</p>
      </div>
    </div>
  </li>
);

export default TrackIndexItem;

// 这是我的 li 元素的 css：

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;
            }
          }
        }
      }

Answer 1

匿名函数示例

 $(function() { $("li").click(function(e) { $(".clicked").removeClass(); $(this).addClass("clicked"); }); });

 .clicked { border: 1px solid #CCC; border-radius: 3px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ol> <li> <div className="track-info"> <i className="music-note-icon"></i> <div className="track-text"> <p>{track.title}</p> <p>{track.artist} • {track.album}</p> </div> </div> </li> <li> <div className="track-info"> <i className="music-note-icon"></i> <div className="track-text"> <p>{track.title}</p> <p>{track.artist} • {track.album}</p> </div> </div> </li> <li> <div className="track-info"> <i className="music-note-icon"></i> <div className="track-text"> <p>{track.title}</p> <p>{track.artist} • {track.album}</p> </div> </div> </li> </ol>

这会专门选择所有clicked类项，删除类，然后将其添加到目标元素。

Answer 2

这是我同时创建的纯 JS 版本。 它也可以在 CodePen 上找到： https ://codepen.io/edlucas/pen/LYEwjxO

由于您使用的是 React，您可以做一些与代码示例不同的事情，并直接在 JSX 中添加 onClick()。

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

在这种情况下，您可以将选择器移动到 highlight 函数中（将使用这些变量的唯一剩余位置）。

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

    targetItem = e.target;
    ...
}

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

工作代码片段：

 // Using pure JS, no jQuery const list = document.getElementById('trackList'); const items = list.querySelectorAll('li'); items.forEach((item) => { item.onclick = (e) => highlight(e); }); function highlight(e) { targetItem = e.target; // Remove the class from all items items.forEach((item) => { removeClass(item, 'active'); }); // Add the class to the "clicked" item addClass(targetItem, 'active'); } function removeClass(item, classVal) { classList = item.className.split(' '); item.className = classList.filter(item => item !== classVal).join(' '); } function addClass(item, classVal) { classList = item.className.split(' '); // Only add the class if it's not in the list if (!classList.includes(classVal)) { classList.push(classVal); } item.className = classList.join(' '); }

 li { width: 100px; padding: 5px; margin-bottom: 5px; } li.bordered { border: 1px solid green; } li.active { background-color: yellow; }

 <html> <body> <ul id="trackList"> <li class="bordered test">Test 1</li> <li class="bordered">Test 2</li> <li class="bordered">Test 3</li> </ul> </body> </html>