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

Posted 2023-05-09

【中文标题】单击后如何更改 li 元素的背景？

【英文标题】：How can I change the background of my li element upon clicking it?

【发布时间】：2020-05-18 14:31:02

【问题描述】：

我看到了这个帖子：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;
            
          
        
      

【问题讨论】：

我会使用.addClass() 和.removeClass()。例如，如果该类被称为“单击”，您可以将其从任何拥有它的 li 元素中删除，然后将其添加到被单击的元素中。

啊，好吧，我也是这么想的。将它们放入我使用 li 标签的 onClick 事件调用的函数中是否是个好主意？

你可以这样做。我认为只需将其包含在 Click 回调的匿名函数中就很容易了。

您也可以在创建<li> 标签时将onClick() 添加到您的JSX。我已将其添加到下面的示例中。

【参考方案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 类项，删除该类，然后将其添加到目标元素。

【讨论】：

嗯，有道理；对于匿名函数，我应该把它放在我的应用程序（哪个文件）中？我猜它不应该在 HTML 或 CSS 中。我会将它放在与呈现 li 元素的组件相同的文件中吗？

@Karen 在你的 HTML 中，或者如果你有一个要加载的 javascript 文件，那也可以。

【参考方案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>

【讨论】：

啊，谢谢你的澄清！我试试看！

我还没有尝试过，但我会尽快通知您/接受答案！被其他几个错误卡住了啊哈