C#按钮重复点击实现不同效果：添加/删除list指定项

Hey there! Let's tackle this button toggle problem you're facing—adding and removing a specific string from a list when clicking the same button multiple times. This is a common UI pattern, and there are clean, scalable ways to implement it depending on whether you're working with vanilla JS or a framework like React.

Core Approach #

The key idea here is to:

• Link each button to its target string (so we know which item to add/remove)
• Check if the item already exists in the list when the button is clicked
• Perform the opposite action: remove if it exists, add if it doesn't

Vanilla JavaScript Implementation #

This works for plain HTML/CSS/JS projects, no frameworks needed.

HTML Structure #

First, set up your buttons and list. Use data-* attributes to bind each button to its corresponding item string:

<div class="button-container">
  <button data-target-item="Apple">Add/Remove Apple</button>
  <button data-target-item="Banana">Add/Remove Banana</button>
  <button data-target-item="Cherry">Add/Remove Cherry</button>
</div>

<ul id="item-list"></ul>

JavaScript Logic #

Add the click event handlers to handle the toggle action:

// Get reference to the list element
const itemList = document.getElementById('item-list');

// Attach click listener to all buttons
document.querySelectorAll('.button-container button').forEach(button => {
  button.addEventListener('click', function() {
    const targetItem = this.dataset.targetItem;
    // Check if the item already exists in the list
    const existingListItem = Array.from(itemList.children).find(li => li.textContent === targetItem);

    if (existingListItem) {
      // Remove the item if it exists
      existingListItem.remove();
      // Optional: Update button style to show inactive state
      this.classList.remove('active');
    } else {
      // Create and add the new item if it doesn't exist
      const newListItem = document.createElement('li');
      newListItem.textContent = targetItem;
      itemList.appendChild(newListItem);
      // Optional: Update button style to show active state
      this.classList.add('active');
    }
  });
});

Optional CSS for Visual Feedback #

Add some styling to make the button's state clear to users:

.button-container button {
  margin: 0 8px 8px 0;
  padding: 6px 12px;
  cursor: pointer;
}

.button-container button.active {
  background-color: #27ae60;
  color: white;
  border-color: #27ae60;
}

#item-list {
  list-style-type: none;
  padding-left: 0;
}

React Implementation #

If you're using React, we can leverage state management to handle this cleanly:

import { useState } from 'react';

function ToggleItemList() {
  // State to track the current items in the list
  const [items, setItems] = useState([]);

  // Handler function to toggle an item
  const handleToggleItem = (targetItem) => {
    setItems(prevItems => {
      if (prevItems.includes(targetItem)) {
        // Remove the item by filtering it out
        return prevItems.filter(item => item !== targetItem);
      } else {
        // Add the item by creating a new array with the item appended
        return [...prevItems, targetItem];
      }
    });
  };

  return (
    <div style={{ padding: '16px' }}>
      <button onClick={() => handleToggleItem('Apple')} style={items.includes('Apple') ? activeButtonStyle : buttonStyle}>
        Add/Remove Apple
      </button>
      <button onClick={() => handleToggleItem('Banana')} style={items.includes('Banana') ? activeButtonStyle : buttonStyle}>
        Add/Remove Banana
      </button>
      <button onClick={() => handleToggleItem('Cherry')} style={items.includes('Cherry') ? activeButtonStyle : buttonStyle}>
        Add/Remove Cherry
      </button>

      <ul style={{ listStyle: 'none', paddingLeft: 0, marginTop: '16px' }}>
        {items.map(item => (
          <li key={item} style={{ padding: '4px 0' }}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

// Inline styles for simplicity (you can use CSS modules too)
const buttonStyle = {
  margin: '0 8px 8px 0',
  padding: '6px 12px',
  cursor: 'pointer'
};

const activeButtonStyle = {
  ...buttonStyle,
  backgroundColor: '#27ae60',
  color: 'white',
  border: '1px solid #27ae60'
};

export default ToggleItemList;

Key Notes #

• Scalability: Both approaches work for any number of buttons—just add more buttons with the correct data-target-item (vanilla) or pass new strings to handleToggleItem (React).
• Uniqueness: This assumes each item string is unique. If you need to handle duplicate items (unlikely in your case), you can use unique IDs instead of plain strings to identify items.
• User Experience: Adding the active button style helps users immediately know which items are currently in the list—always a nice touch!

内容的提问来源于stack exchange，提问作者Bogdan Dragos