带有动态 ID 的 Boostrap 3 剪贴板和工具提示

编程问答 2022-05-16

问题描述

我有以下代码，但我需要所有带有 #coupon 的 ID 才能使用动态帖子 ID，例如：#coupon-3567

jQuery('#coupon').tooltip({
  trigger: 'dblclick',placement: 'top'
});

function setTooltip(message) {
    jQuery('#coupon').tooltip('enable');
  jQuery('#coupon').attr('data-original-title',message).tooltip('show');
}

function hidetooltip() {
  setTimeout(function() {
    jQuery('#coupon').tooltip('hide');
    jQuery('#coupon').tooltip('disable');
  },2000);
}

var clipboard = new Clipboard('#coupon');
 
clipboard.on('success',function(e) {
  setTooltip('¡copied!');
  hidetooltip();
});

clipboard.on('error',function(e) {
  setTooltip('Error');
  hidetooltip();
});

我修改了HTML代码来获取ID，但是不知道如何让ID在JS中工作，我试了好几个小时都没有成功。

<div id="coupon-<?PHP echo get_the_ID() ?>" class="cnt-cpn-bd" data-post-id="<?PHP echo get_the_ID() ?>" data-clipboard-text="<?PHP the_field( 'coupon_code',get_the_ID() ); ?>">

有人可以帮我吗？

解决方法

例如

<div id="coupon-444"></div>

您将获得 Id

console.log($('[id^=coupon]').attr('id'));
result: coupon-444

然后使用

var id = $('[id^=coupon]').attr('id');
$('#' + id).tooltip({
  trigger: 'dblclick',placement: 'top'
});

function setTooltip(message) {
  var id = $('[id^=coupon]').attr('id');
  $('#' + id).tooltip('enable');
  $('#' + id).attr('data-original-title',message).tooltip('show');
}

为了隐藏

function hideTooltip() {
  var id = $('[id^=coupon]').attr('id');
  setTimeout(function() {
     $('#' + id).tooltip('hide');
     $('#' + id).tooltip('disable');
  },2000);
}
clipboardclipboardjquerytooltiptooltiptooltip