如何在colorbox中显示JavaScript变量

How to show JavaScript variable in colorbox

本文关键字：显示 JavaScript 变量 colorbox      更新时间：2023-09-26

我使用colorboxjquery，在颜色框中显示变量时遇到问题。

我有一个名为wp_store_caption的变量，它从输入类型-中获取值

<input type="text" id="title" class="ab_form_text wp_store_caption require" name="wp_store_caption" value="">

现在我使用颜色框，如：-

jQuery(document).ready(function() {
    var wp_store_caption = jQuery('#title').val();
    jQuery(".open-popup-link").colorbox({html:"<h1>"+wp_store_caption+"</h1>"});
});

但不能显示wp_store_caption的值，但当使用不带颜色框的alert()时，我可以看到值。

问题出在哪里？！

这并没有发生，因为当您编写时

jQuery(".open-popup-link").colorbox({html:"<h1>"+wp_store_caption+"</h1>"})

绑定wp_store_caption的值，该值最初未定义。

您需要绑定点击事件并为wp_store_caption赋值，然后调用colorbox函数。

你应该这样写：

$(".open-popup-link").click(function () {
    $.colorbox({
        html: "<h1>" + $('#title').val() + "</h1>"
    });
});

请参阅此处的演示

在这个例子中，我有预定义的title值。请注意，此值不会更新颜色框中的标题，因为-wp_store_caption的值没有更新。

您可以绑定到.blur（）以使其像这里一样工作。

$(function() {
  $('#title').blur(function(){
  var wp_store_caption = $('#title').val();
    if (wp_store_caption.length > 0)
      $.colorbox({html:"<p>" + wp_store_caption + "</p>"})
 });
});
相关文章：