javascript 点击切换图标无法实现，如何解决？
javascript 点击切换图标无法实现
<div class="side-bar">
<img id ="like" src="icon/like.png" onclick="like_change(this)" alt="">
</div>
function like_change(obj){
var src = obj.src;
if(src ==="icon/like.png"){
src = "icon/like-fill.png";
}else{
src = "icon/like.png";
}
}
图片的路径没错，但是不知道为什么就是切换不了。网上也没搜到相关的解决办法。
加一句
obj.src = src
obj.src 获取到的路径 是加了 本地的路径的。
只有获取 属性才不加
function like_change(obj) {
var src = obj.getAttribute("src");
console.log(obj,src,obj.src)
if (src === "icon/like.png") {
src = "icon/like-fill.png";
} else {
src = "icon/like.png";
}
obj.src=src;
}
- 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7747640
- 这篇博客也不错, 你可以看下使用 JavaScript 用循环嵌套输出乘法表。外循环控制行数，内循环控制当前行要输出的乘法表达式，在页面上输出九九乘法表
- 除此之外, 这篇博客: 使用JavaScript实现出一个简单的购物车中的 利用了JavaScript进行加减运算对商品进了了一个简单的添加，删除，以及多个商品之间的价钱叠加这样的效果。 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
话不多说,直接上代码：
Html:
<h1>商店</h1> <table> <tr> <th>商品</th> <th>单价(元)</th> <th>颜色</th> <th>库存</th> <th>好评率</th> <th>操作</th> </tr> <tr> <td>罗技M185鼠标</td> <td>80</td> <td>黑色</td> <td>893</td> <td>98%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcart(this)" /> </td> </tr> <tr> <td>微软X470键盘</td> <td>150</td> <td>黑色</td> <td>9028</td> <td>96%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcart(this);" /> </td> </tr> <tr> <td>洛克iphone6手机壳</td> <td>60</td> <td>透明</td> <td>672</td> <td>99%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcart(this);" /> </td> </tr> <tr> <td>蓝牙耳机</td> <td>100</td> <td>蓝色</td> <td>8937</td> <td>95%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcart(this);" /> </td> </tr> <tr> <td>金士顿U盘</td> <td>70</td> <td>红色</td> <td>482</td> <td>100%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcart(this);" /> </td> </tr> </table> <h1>购物车</h1> <table> <thead> <tr> <th>商品</th> <th>单价(元)</th> <th>数量</th> <th>金额(元)</th> <th>删除</th> </tr> </thead> <tbody id="goods"> </tbody> <tfoot> <tr> <td colspan="3" align="right">总计</td> <td id="total"></td> <td></td> </tr> </tfoot> </table>在用css进行简单的修饰:
h1 { text-align: center; } table { margin: 0 auto; width: 60%; border: 2px solid #aaa; border-collapse: collapse; } table th, table td { border: 2px solid #aaa; padding: 5px; } th { background-color: #eee; }最后的重头戏来了,如何用JavaScript实现效果:
var map = new Map(); //创建一个集合 function add_shoppingcart(btn) { //btn就是上面传下来的this //console.log(btn); var ntr = document.createElement("tr"); //获取到商品的价格和名称 var tr = btn.parentNode.parentNode; //获取到按钮的父亲 var tds = tr.children; //获取商品的名称 var name = tds[0].innerHTML; //获取商品的价格 var price = tds[1].innerHTML; console.log("name:" + name + ",price:" + price); //判断集合中是否又加入商品.如果有不能加入,只能加数量,没有可加入 if (map.has(name)) { //如果有不能加入,只能加数量 var tr1=map.get(name); //console.log(tr1); //var btn1=tr1.getElementById("btn1"); var btn1=tr1.getElementsByTagName("button")[1]; //console.log(btn1); jia(btn1); } else { //如果没有该商品,可以正常添加 ntr.innerHTML = `<td style="text-align:center;">${name}</td> <td style="text-align:center;">${price}</td> <td style="text-align:center;"> <button onclick="jian(this)">-</button> <input type="text" value="1" size="1" /> <button id="btn1" onclick="jia(this)">+</button> </td> <td>${price}</td> <td style="text-align:center;"><button onclick="del(this)">X</buttton></td>`; //将name和一行数据存入到集合中 map.set(name, ntr); //找到tbody的对象 var tbody = document.getElementById("goods"); //把上面创建好的一行五列加入到tbody中 tbody.appendChild(ntr); sum(); } } function del(btn) { var tr = btn.parentNode.parentNode; tr.remove(); //删除的是DOM文档中的内容,并没有把集合中的内容删除. var tr = btn.parentNode.parentNode; //获取到按钮的父亲 var tds = tr.children; //获取商品的名称 var name = tds[0].innerHTML; map.delete(name); //删除的是集合中的内容 sum(); } function jian(btn) { var inpt = btn.nextElementSibling; var amount = inpt.value; if (amount <= 1) { return; } else { inpt.value = --amount; var trs = btn.parentNode.parentNode; console.log(trs); var price = parseInt(trs.children[1].innerHTML); trs.children[3].innerHTML = price * amount; sum(); } } function jia(btn) { //形式参数 //获取+号按钮左边input控件的对象 var inpt = btn.previousElementSibling; //console.log(Inpt); var amount = inpt.value; //console.log(amount); inpt.value = ++amount; //把累加后的数放进去 var td = btn.parentNode.previousElementSibling; //console.log(td); var price = parseInt(td.innerHTML); //取到单价的值 //console.log(price); var rtd = btn.parentNode.nextElementSibling; rtd.innerHTML = price * amount; sum(); } //求所有商品的累加和 function sum() { //获取到tbody的对象 var tbody = document.getElementById("goods"); var trs = tbody.children; //得到tbody的孩子 var total = 0; //用于求累加和 for (i = 0; i < trs.length; i++) { //取到每一个商品的价格 var price = trs[i].children[3].innerHTML; total = total + parseInt(price); } var t = document.getElementById("total"); //然后把total的值放入到t对象中 t.innerHTML = total; }效果如下:
在每次添加商品的时候,当遇到了相同的商品时，不会进行数目的得加，于是用map对象对其进行插入.
注释也在代码上展示出来了,这里也不必多说,感觉效果还算可以,毕竟一只小菜鸟.
- 您还可以看一下 吴华老师的Javascript面向对象特效&框架封装实战课程中的 原型构造方式封装购物车-界面整合小节, 巩固相关知识点
- 以下回答由chatgpt基于相关博客总结生成:
我可以给出一个解决JavaScript点击切换图标无效的问题的方案。需要使用一个事件监听器，当点击图标时，改变图标的src属性即可。
示例代码如下：
HTML代码：
JavaScript代码：
const icon = document.getElementById("icon"); const iconImg = document.getElementById("icon-img");
icon.addEventListener("click", function() { if (iconImg.src === "path/to/image1.png") { iconImg.src = "path/to/image2.png"; } else { iconImg.src = "path/to/image1.png"; } })
说明：
首先通过getElementById方法获取图标所在的div和图标所在的img元素。
然后给div元素添加一个click事件监听器，当点击图标时触发。
在监听器中判断当前图标的src属性是否为第一张图片的路径，如果是则更换为第二张图片的路径，否则更换为第一张图片的路径。这样做就可以实现点击切换图标的功能了。
注意：需要确保图片路径的正确性。如果图片路径不正确会导致切换无效。