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

Question

我有以下代码，但我需要所有带有#coupon 的 ID 才能使用动态 post 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() ); ?>">

有人可以帮我吗？

Answer 1

例如

<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);
}

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

Boostrap 3 clipboard and tooltip with dynamic ID

clipboard

jquery

tooltip

zeroclipboard