将切换类应用于图像元素
将切换类应用于图像元素
提问于 2016-03-27 12:36:02
我正在构建一个离子应用程序，我想单击图像并用不同的图像更改它。它是一种切换功能。
我有以下类：
img{
&.default {
background-image: url("img/726-star.png");
&.activated{
background-image: url("img/726-star-selected.png");
}
}我应用这个类，如下所示：
<img class="default" style="width:38px;height:38px;margin-top:30px;"/>但是当我在Chrome调试器工具中看到的时候，我没有看到默认的类被应用。我做错了什么？
更新:所以，我现在使用的是DIV而不是图像，但是我看不到div中显示的图像：
#favImage {
&.default {
background-image: url("img/726-star.png");
}
&.activated {
background-image: url("img/726-star-selected.png");
}
}<div id="favImage" class="default" style="width:38px;height:38px;margin-top:30px;"></div>回答 1
Stack Overflow用户
发布于 2016-03-27 19:31:44
首先，我建议您将html中的样式分散到css文件中。其次，如果您使用的是img标记，不要忘记将src属性插入到img标记中，否则img将不会显示。要通过单击来更改图像，我使用了JavaScript函数，该函数通过在img标记"onclick“上写一个属性并调用JavaScript函数激活。该函数将图像id放入变量中，并使用匹配方法检查图像src是否包含字符串"726-star- not“，如果不是，则图像src变为"726-star-selected”，反之亦然。
to learn more about the match method
function myFunction() {
var image = document.getElementById('favImage');
if (image.src.match("726-star-not")) {
image.src = "img/726-star-selected.png";
} else {
image.src = "img/726-star-not.png";
}
}#favImage{
width:38px;
height:38px;
margin-top:30px;
}<html>
<head>
<link rel="stylesheet" href="css/style.css"/>
<script src="js/javascript.js"></script>
</head>
<body>
<img id="favImage" src="img/726-star-not.png" onclick="myFunction()">
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36243877
复制相关文章
相似问题
腾讯云开发者
