如何在colorbox中显示JavaScript变量

我使用

colorbox

jquery，在colorbox中显示变量时遇到问题

我有一个名为

wp\u store\u 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>"});

});

jQuery（文档）.ready（函数（）{
var wp_store_caption=jQuery（'#title'）.val（）；
jQuery（“.open popup link”）.colorbox（{html:+wp\u store\u caption+”）；
});

但是不能显示

wp\u store\u caption

的值，但是在不使用colorbox的情况下使用

alert（）

时，我可以看到值

---

问题在哪里

这不会发生，因为当你写

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

，我有预定义的标题值。请注意，此值不会更新colorbox中的标题，因为-

wp\u store\u caption

的值未更新。

您可以绑定到.blur（）以使其正常工作

$（函数（）{
$（'#title'）.blur（函数（）{
var wp_store_caption=$（'#title'）.val（）；
如果（wp_store_caption.length>0）
$.colorbox（{html:“+wp\u store\u caption+”
“}）
});
});

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

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