单击时显示勾号

Question

在我的 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();

    });
});

Answer 1

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

 $(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：您缺少字体很棒的 css。

Answer 2

编辑：我添加了一些备用按钮来证明它适用于多个按钮，并且文本“Tick go here”作为占位符（我假设在您的实际项目中您包含了字体很棒的文件，以便显示实际的刻度）

你是这个意思吗？ 如果您总是只想在单击的按钮内定位.complete-tick则无需担心获取 targetDiv ：

 $(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>