在收藏夹列表中添加/删除电影时，我无法更改项目菜单工具栏的图标

在Web开发中，收藏夹列表通常是通过HTML、CSS和JavaScript来实现的。如果你在添加或删除电影时无法更改项目菜单工具栏的图标，可能是由于以下几个原因：

基础概念

HTML结构：用于定义页面的结构。
CSS样式：用于定义页面的外观。
JavaScript：用于实现页面的交互逻辑。

可能的原因

事件绑定问题：可能没有正确绑定事件监听器，导致添加或删除电影时没有触发相应的函数。
DOM更新问题：可能没有正确更新DOM，导致图标没有及时更新。
CSS选择器问题：可能使用了错误的CSS选择器，导致无法正确选中并更改图标。

解决方法

以下是一个简单的示例，展示如何在添加或删除电影时更改图标：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收藏夹</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="movie-list">
        <!-- 电影项 -->
        <div class="movie-item" data-id="1">
            <span class="movie-title">电影1</span>
            <button class="delete-btn">删除</button>
            <span class="icon">🔒</span>
        </div>
        <!-- 其他电影项 -->
    </div>
    <button id="add-movie">添加电影</button>

    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.movie-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.icon {
    margin-left: 10px;
}

JavaScript (script.js)

document.getElementById('add-movie').addEventListener('click', function() {
    const newMovie = document.createElement('div');
    newMovie.className = 'movie-item';
    newMovie.setAttribute('data-id', Date.now());
    newMovie.innerHTML = `
        <span class="movie-title">新电影</span>
        <button class="delete-btn">删除</button>
        <span class="icon">🔒</span>
    `;
    document.getElementById('movie-list').appendChild(newMovie);
});

document.getElementById('movie-list').addEventListener('click', function(event) {
    if (event.target.classList.contains('delete-btn')) {
        const movieItem = event.target.closest('.movie-item');
        movieItem.remove();
    }
});

document.getElementById('movie-list').addEventListener('click', function(event) {
    if (event.target.classList.contains('movie-item')) {
        const icon = event.target.querySelector('.icon');
        icon.textContent = icon.textContent === '🔒' ? '🔓' : '🔒';
    }
});