Question

我有以下代码，但我需要所有带有 #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() ); ?>">

有人可以帮我吗？

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 的 Boostrap 3 剪贴板和工具提示

1 个答案: