点击时显示勾号答案

【问题标题】：Show tick on click点击时显示勾号
【发布时间】：2017-02-20 18:01:18
【问题描述】：

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

    });
});

【问题讨论】：

缺少]。 $('[data-complete') => $('[data-complete]')
选择器中缺少]
$('.complete').on('click', function(e) { var targetDiv = $(this).data('complete'); $('.' + targetDiv).show(); e.preventDefault(); });
jQuery addClass onClick的可能重复
@Tushar 谢谢，但我怎样才能附加我的 .complete-tick css？我有多个按钮，所以我的 targetDiv 将它们分开

标签： javascript jquery

【解决方案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。

【讨论】：

它仍然不使用 targetDiv - 这是目前需要点击所有框显示勾号:)
你想用var targetDiv.做什么？
我认为他将有多个 button.complete 元素 - 并且只需要影响被点击的元素内的 .complete-tick 元素 - 但这是一种迂回的方式。

【解决方案2】：

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

这是你的意思吗？如果您总是只想在单击的按钮内定位.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>

【讨论】：