Question

我希望在单击剪贴板时显示复制的切换开关，但也要显示多个项目，这是到目前为止的代码...

使用bootstrap 4.1

<button type="button" class="btn clipboard_button_1">
    <i class="fas fa-clipboard-list"></i>
</button>

<button type="button" class="btn clipboard_button_2">
    <i class="fas fa-clipboard-list"></i>
</button>

<button type="button" class="btn clipboard_button_3">
    <i class="fas fa-clipboard-list"></i>
</button>

<script>
    $(document).ready(function(){
        $('.clipboard_button_1').click(function() {
            $('.clipboard_button_1').attr('data-toggle', 'tooltip').attr('data-html', 'true').attr('title', 'Gekopieerd naar klembord!');
            $('.clipboard_button_1').tooltip('show');
            setTimeout(function() {
                $('.clipboard_button_1').removeAttr('data-toggle').removeAttr('data-html').removeAttr('title').removeAttr('data-original-title');
                $('.clipboard_button_1').tooltip('hide');
            },1000);
        });
    });
</script>

Answer 1

我已经添加了ID并进行了一些更改，到目前为止，它似乎仍然有效：）

<button type="button" class="btn clipboard_button" id="1">
    <i class="fas fa-clipboard-list"></i>
</button>

<button type="button" class="btn clipboard_button" id="2">
    <i class="fas fa-clipboard-list"></i>
</button>

<button type="button" class="btn clipboard_button" id="3">
    <i class="fas fa-clipboard-list"></i>
</button>
$(document).ready(function(){
    $('.clipboard_button').click(function() {
        var id = $(this).attr("id");

        $(".clipboard_button#"+id).attr("data-toggle", "tooltip").attr('data-placement', 'bottom').attr("data-html", "true").attr("title", "Gekopieerd naar klembord!").attr("data-original-title", "Gekopieerd naar klembord!");
        $('.clipboard_button#'+id).tooltip('show');
        setTimeout(function() {
            $(".clipboard_button#"+id).removeAttr("data-toggle").removeAttr('data-placement', 'bottom').removeAttr("data-html").removeAttr("title").removeAttr("data-original-title");
            $('.clipboard_button#'+id).tooltip('hide');
        },1000);
    });
});

Answer 2

试试看！它将起作用。

<button type="button" class="btn clipboard_button_1" id="clipboard_button_1">
    <i class="fas fa-clipboard-list"></i>
</button>

<button type="button" class="btn clipboard_button_2" id="clipboard_button_2">
    <i class="fas fa-clipboard-list"></i>
</button>

<button type="button" class="btn clipboard_button_3" id="clipboard_button_3">
    <i class="fas fa-clipboard-list"></i>
</button>
<script>

$(document).ready(function(){
        $('.btn').click(function() {
            $(this).attr('data-toggle', 'tooltip').attr('data-html', 'true').attr('title', 'Gekopieerd naar klembord!');
            $(this).tooltip('show');
            var idname = $(this).attr('id');
            setTimeout(function() {
                $('#'+idname).removeAttr('data-toggle').removeAttr('data-html').removeAttr('title').removeAttr('data-original-title');
                $('#'+idname).tooltip('destroy');
            },1000);
        });
    });
</script>

Bootstrap jQuery变量获取类

2 个答案: