Как я могу изменить фон моего элемента li при нажатии на него?

Question

Я наткнулся на этот пост: HTML

• цвет при нажатии и другие
• в том же

И это похоже на то, что я ищу; но я был немного озадачен тем, как бы я делал то же самое в приложении rails (которое также использует response / redux). В приложениях rails, над которыми я работал до сих пор, я пока не вижу в них jquery, поэтому я не уверен, где и как я реализовал бы ту же идею. Любая помощь приветствуется!

Я подумал об использовании события onClick для элементов li, а затем о создании функции для добавления класса в элемент, по которому щелкнули, / удаления класса из всех других элементов 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;

// это мои css для элементов li:

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

Вот чистая JS версия, которую я создавал одновременно. Он также доступен в CodePen: https://codepen.io/edlucas/pen/LYEwjxO

Поскольку вы используете React, вы можете сделать что-то немного отличное от примера кода и добавить onClick () непосредственно в JSX.

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() достаточно c для перемещения в файл, содержащий вспомогательные / служебные функции и импортированный в файл 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>

Answer 2

Пример анонимной функции

$(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, удаляет класс, а затем добавляет его к целевому элементу.