javascript - 如何在循环内使用类名更改innerHTML
问题描述
在这里我的代码我只想通过获取 for 循环内部的类名来更改 btn 的 innerHTML
{% for pbyid in productbyid %}
<div class="card card_body m-2 p-0 container" id='{{pbyid.id}}'>
<div>
<div>
<a href="/viewpage/{{pbyid.id}}"><div class='imagestyle' ><img class="card-img-top " src="{{pbyid.image}}"width="500" height="200" alt="Card image cap "></div></a>
<span class="top-left">{{pbyid.discountpercentage}}% off</span>
</div>
<div class="card-body">
<h5 class="card-title cardtitle">{{pbyid.title}}</h5>
<div><p class="carddesccrip">{{pbyid.desc}} </p></div>
<div class='pricce_card'>
<span class='price'> <b>M.R.P</b> <strike class='carddesc'>RS {{pbyid.discountPrice}}</strike></span>
<span class='final_price'><b>RS. {{pbyid.finalprice}}</b></span>
</div>
</div>
<div class="card-body">
{% comment %} /viewpage/{{pbyid.id}} {% endcomment %}
<p href="" id='' class="btn btn-lg btn-block addbtn caddtocart" onclick="myFunction({{pbyid.id}})" > Add to cart
<i class="fa fa-plus float-right align-center p-2 plusbtn" aria-hidden="true"></i></p>
</div>
</div>
</div>
{% endfor %}
js
我如何从类中更改 btn 的 html,当我尝试时它不能与类名一起使用,但它与 id 一起使用,但对于 id 是特定的,所以我们必须使用类名,但我不知道如何解决任何人都可以解决它的想法
function myFunction(id) {
var x = document.getElementsByClassName("caddtocart");
x.innerHTML = "added";
console.log(id);
}
<-- another method -->
var x = document.getElementsByClassName("caddtocart");
x.forEach(myFunction(id))
{
document.getElementsByClassName("caddtocart").innerHTML = "Paragraph changed!";
console.log(id);
}
</script>
解决方案
试试下面的代码:
function myFunction(id) {
var els = document.getElementsByClassName("caddtocart");
Array.prototype.forEach.call(els, function(el) {
elm.innerHTML = "Paragraph changed!";
console.log(el.id);
});
}
或首先检查id
:
function myFunction(id) {
if(id) {
var elm = document.getElementById(id);
elm.innerHTML = "Paragraph changed!";
} else {
var els = document.getElementsByClassName("caddtocart");
Array.prototype.forEach.call(els, function(el) {
elm.innerHTML = "Paragraph changed!";
console.log(el.id);
});
}
}
推荐阅读
- angular - 如何在其他地方使用订阅的 observable?
- mongodb - 如何修复 MongoError:GKE 上没有可用的 mongos 代理
- c - 尝试为文件 IO 创建多个线程时出现分段错误:
- twitter-bootstrap - 主题引导以更改表单输入活动颜色
- git - 有没有办法通过 git log 实现 Graph by Branch 功能?
- machine-learning - 提交后在 Kaggle 中丢失输出训练模型
- mysql - 尝试“npm start”我的 vue.js 构建,但我收到此错误:未找到此相关模块:
- spring-boot - SpringBootTest - 如果上下文加载失败如何断言
- c# - 在 SteamVR 控制器上获取菜单按钮输入
- elasticsearch - 使用新映射更新 Elasticsearch 5.6 索引类型