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

Question

我看到了这个帖子：HTML <ul> | Change particular <li> color onclick and other <li> in the same <ul> to default color

它看起来像我要找的东西；但我对如何在 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>
);

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

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

    targetItem = e.target;
    ...
}

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

工作代码sn-p：

// 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>