Question

在点击data-complete的按钮时，在我的JS中，它通过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：你缺少font-awesome css。

Answer 2

编辑：我添加了一些备用按钮，以证明它适用于多个按钮，并且文本“嘀嗒声”会在此处显示＆＃39;作为占位符（我假设在你的实际项目中你包含了字体真棒文件，以便显示实际的刻度）

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

＆＃13;

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

＆＃13;

.complete-tick {
    display:none;
}
.complete-tick i:before {
    content:'tick goes here';
}

＆＃13;

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

＆＃13;

点击即可显示勾号

2 个答案: