//css
.duihuan{
display: flex;
justify-content:space-between;
padding: 10px;
border-bottom: 1px solid #ddd;
}
.coupon_list{
padding: 10px;
border-bottom: 2px solid yellow;
}
.coupon_list dl{
display: inline-block;
width: 49%;
text-align: center;
color:red;
}
.coupon_list dl dt img{
width: 100%;
}
//html
<div class="coupon_list" id="coupon_list">
<dl>
<dt><img src="../images/money5.png"></dt>
<dd>需消耗:500积分</dd>
</dl>
<dl>
<dt><img src="../images/money10.png"></dt>
<dd>需消耗:1000积分</dd>
</dl>
<dl>
<dt><img src="../images/money20.png"></dt>
<dd>需消耗:2000积分</dd>
</dl>
<dl>
<dt><img src="../images/money50.png"></dt>
<dd>需消耗:5000积分</dd>
</dl>
</div>
//js
<script type="text/javascript">
var list=document.querySelector(".coupon_list");var dl=list.getElementsByTagName("dl")
var len=dl.length;
for(var i=0;i<len; i++){ //循环出来
dl[i].οnclick=function(){
alert(2)
}
}
//alert(this.className);弹出类名