在收藏夹列表中添加/删除电影时，我无法更改项目菜单工具栏的图标
在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 === '🔒' ? '🔓' : '🔒';
}
});应用场景
这个示例可以应用于任何需要动态更新图标的Web应用，例如收藏夹、购物车、任务列表等。
参考链接
通过以上示例和解释，你应该能够解决在添加或删除电影时无法更改图标的问题。如果问题仍然存在，请检查控制台是否有错误信息，并确保所有文件正确加载。
相关·内容
我想在菜单工具栏中更改项目action_favorite的图标。当我点击item toobar_fav它将改变图标白心，我再次点击item toolbar_fav它将改变图标红心。此外，当我点击FloatingActionButton时，也会改变item action_favorite的图标。现在我对此没有任何想法。我<
浏览 25提问于2020-11-10得票数 0
1回答
我正在建立一个简单的电影应用程序使用Vue和Vuex，并希望能够添加电影到收藏列表时，一个按钮被点击。我正在将电影添加到商店，但我希望在添加电影时，按钮上的文本从“添加到收藏夹”更改为“从收藏夹中删除”。我</em
浏览 2提问于2018-03-13得票数 1
我想设置一个GPO，这样用户就不能再编辑、删除、添加或重命名桌面项目了。到目前为止我激活了：- guidelines--- desktop----- don't
浏览 0提问于2021-06-15得票数 0
2回答
如何引用集合中的位置？就像数组一样：array[5];
我正在开发一个android声板，有一个收藏夹标签。收藏夹选项卡使用列表视图。当用户添加收藏夹时，该按钮的文本将被添加到集合中。现在，我已经为列表视图设置了一个上下文菜单，允许用户通过长按和按delete来删除项目。上下文菜单</
浏览 1提问于2012-03-08得票数 2
我只想给android工作室工具栏添加几个快捷键，比如eclipse :
在我进入android的设置之后，我看到了菜单和工具栏的选项。我只是不知道如何从这一点添加项目到我的工具栏。以下是我想补充的快捷方式：2)新的安
浏览 12提问于2014-04-10得票数 12
回答已采纳
1回答
我有一个从本地数据库中抓取的项目列表，并将它们显示在列表中。当单击项目时，会出现一个底部工作表，用户可以在其中添加或删除收藏夹列表中的该项目，但该功能工作得非常完美，除非具有图标和文本的UI部件不会更改状态(应该从border_favori
浏览 2提问于2020-12-10得票数 1
回答已采纳
Microsoft Edge browser不支持收藏夹中的javascript bookmarklet。有没有解决这个问题的简单方法？当Edge的浏览器扩展问世时，如果用户安装了扩展，就有可能实现--但这对用户和开发人员来说开销要高得多。和旧的解决方法：
使用已安装程序的黑客攻击：
浏览 0提问于2016-06-23得票数 6
1回答
在我的android应用程序中，我有一个显示用户联系人的列表视图。我需要实现一个选项菜单，有一个菜单项名称“添加到收藏夹”，这将添加从列表视图中选择的联系人到收藏夹列表。我正在纠结于如何从列表视图中跟踪所选项目以添加到收藏
浏览 3提问于2011-09-06得票数 0
1回答
我是一个Ubuntu新手，只使用Ubuntu16.04(有点害怕尝试移到18.04或20.04)。所以，我知道我落后了，但是16.04对于我目前的目标来说是可以的。从谷歌搜索如何安装一些软件，我最近了解了突触包管理器。我能够安装它，它真的很棒，因为它为我在安装新软件时解决依赖关系方面的问题提供了帮助。我唯一的问题是，是否有可能在左边的列中与其他<
浏览 0提问于2020-10-26得票数 0
回答已采纳
5回答
我正在处理如下所示的SQL
注意as和begin之间的巨大差距。
我怎么才能移除这些？我使用了SQL格式化程序，但这不起作用。
浏览 0提问于2015-12-31得票数 26
每部电影应该只被添加到收藏列表中一次，但是这个bug使得每次我更改页面并返回到某个电影页面并添加它时，它都会将自己推入收藏列表中。如何检查某个imdbID是否已经存在，并阻止应用程序将其添加到状态中？ }
这就是我在
浏览 0提问于2018-06-26得票数 0
我设法删除了Ubuntu (14.04)桌面上的最高面板。然后我恢复了它，但错误地我也添加了Windows列表指示符。
我怎么才能把它移除？它已经在底部的面板上了，我不想再要了。
浏览 0提问于2018-06-28得票数 3
我正在构建一个我使用sharedprefs来拥有收藏夹的项目，但是在重新启动singlemovie活动菜单上显示的是非最爱图标，但是该项目存储在收藏夹中，如果它在收藏夹列表中，如何在菜单栏中显示收藏夹图标先帮我一下，谢谢你
在</e
浏览 1提问于2019-10-30得票数 0
回答已采纳
5回答
我用肉桂桌面在上安装了Firefox。📷有没有办法在面板(“任务栏”)按钮和菜单上显示标准Firefox图标？这个“眼球”图标在视觉上毫无吸引力，如果我不能改变它，我会卸载Firefox，转而使用Opera或Chrome。(是的，我真的觉得它那么丑。<em
浏览 0提问于2012-03-26得票数 9
回答已采纳
1回答
我正在建设一个电子商务网站。我正在使用一个心脏字体图标，它作为一个工具，用户可以用它来喜爱网站中的某一项。因此，当用户单击该图标时，它会将其颜色从黑色更改为红色。我如何将更改保存在css中？顺便说一句，我用的是反应。; item: itemName, };
浏览 1提问于2022-05-26得票数 0
1回答
我有一个组件，用于将项添加/删除到收藏夹中。它运行得非常好，但用户无法看到他/她是否将该项目添加到收藏夹中(如果该项目是收藏夹，则显示一个星型图标；如果没有，则显示一个空图标)。我该如何积极地做这件事？如果用户单击它，我希望我的图标改变它
浏览 1提问于2018-12-03得票数 0
回答已采纳
我给自己做了一个bookmarklet，它的功能很好，但当添加到Opera或Firefox的工具栏中时，它只会显示浏览器的默认书签图标(分别是一个地球和一个星形)。我的网站有一个收藏夹图标，窗口、标签甚至站点书签都使用我指定的收藏夹图标。只是不是我的书签。
浏览 0提问于2009-02-06得票数 113
我正在制作一个图书应用程序。我得到了全景图中的new releases列表和favorites列表。现在，在new releases列表中的每条记录旁边都有一个add to favorite按钮，它在单击时将特定的图书添加到favorite列表中，然后删除特定的add to favourite按钮。我<
浏览 2提问于2013-11-11得票数 0
回答已采纳
1回答
我在Ubuntu20.04下运行Gnome 3.36.1。在Gnome桌面文件中，我定义了一个图标'myIcon‘，它出现在菜单和扩展"TaskBar 2020“收藏夹列表中。但是，当运行任务时，任务列表中的任务会恢复为标准的Java图标“Duke”，而我无法区分各种Jav
浏览 0提问于2020-05-23得票数 0
4回答
当你通过add -> New Item添加源文件时，有没有办法改变Visual Studio2010使用的默认目录？
浏览 1提问于2011-05-17得票数 7
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
