点击时显示勾号

Show tick on click

本文关键字：显示      更新时间：2023-09-26

在我的JS中，当一个带有data-complete的按钮被点击时，它会通过targetDiv给我所需的值。

从这个我有.complete-tick类的问题，因为我想添加.css({'display' : 'block'});类。如何?

HTML: 

 <button class="complete" data-complete="showTick-1" type="button">click me <div class="complete-tick"><i class="fa fa-check"></i></div></button>

JS: 

$(function(){
    $('[data-complete]').on('click', function(e) {
        var targetDiv = jQuery(this).attr('data-complete');
       (".complete-tick").css({'display' : 'block'});
        e.preventDefault();
    });
});

您需要为div添加.complete-tick类的必要样式。就你的问题而言，下面的代码应该可以工作。

$(function(){
    $('[data-complete]').on('click', function(e) {
        //var targetDiv = $(this).attr('data-complete');
       $(this).find(".complete-tick").css('display','block');
        e.preventDefault();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="complete" data-complete="showTick-1" type="button">click me <div class="complete-tick"><i class="fa fa-check"></i></div></button>

PS:你错过了font-awesome css

EDIT:我添加了一些备用按钮来演示它适用于多个按钮，并且文本'Tick goes here'作为占位符(我假设在您的实际项目中您包含了font-awesome文件，以便显示实际的Tick)

你是这个意思吗?你不需要担心抓取targetDiv，如果你总是想目标.complete-tick在点击按钮:

$(function(){
    $('[data-complete]').on('click', function(e) {
       $(".complete-tick", this).css('display','block');
        e.preventDefault();
    });
});
.complete-tick {
    display:none;
}
.complete-tick i:before {
    content:'tick goes here';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="complete" data-complete="showTick-1" type="button">click me <div class="complete-tick"><i class="fa fa-check"></i></div></button>
<button class="complete" data-complete="showTick-2" type="button">click me <div class="complete-tick"><i class="fa fa-check"></i></div></button>
<button class="complete" data-complete="showTick-3" type="button">click me <div class="complete-tick"><i class="fa fa-check"></i></div></button>

相关文章：