添加text-decoration: line-through

<div class="list-group bord-all">
 <a class="list-group-item">
 <div class="row">
 <div class="col-xs-1">
 <label>2018-01-04</label>
 </div>
 <div class="col-xs-9">
 <span class="add-span" data-toggle="modal" data-target="#myModal" data-id="<?= $value['id'] ?>">测试</span>
 </div>
 <button class="btn btn-primary btn-hover-primary add-btn-hover js-add-btn-hover">设为已完成</button>
 </div>
 </a>
</div>

<script>

//设置任务状态
$('.list-group .list-group-item').mouseover(function (){
$(this).find(".js-add-btn-hover").show();
});
$('.list-group .list-group-item').mouseout(function () {
$(this).find(".js-add-btn-hover").hide();
});
var hflag=1;
$(".js-add-btn-hover").click(function(){
if(hflag){
$(this).siblings(".col-xs-9").addClass("line-through");
 $(this).html("设为未完成");
 hflag=0; 
 }else{
$(this).siblings(".col-xs-9").removeClass("line-through");
 $(this).html("设为已完成");
 hflag=1;
 }
})

</script>

 

转载于:https://www.cnblogs.com/sdsd123/p/8191225.html