从Bootstrap模态框取值到PopcornJS脚注插件时出现[object HTMLSpanElement]问题

嘿，我一眼就瞅出问题出在哪啦！你这段代码里的$('#value').text( $('#newGoal').val() )返回的不是你想要的文本内容，而是jQuery对象本身——也就是那个<span id="value">元素，所以当你把它传给PopcornJS脚注插件时，就会显示成[object HTMLSpanElement]。

问题根源 #

jQuery的.text()方法有两种用法：

• 不带参数时：$('#value').text()，这是获取元素的文本内容，返回字符串。
• 带参数时：$('#value').text(内容)，这是设置元素的文本内容，返回的是当前jQuery对象（也就是对应的DOM元素），不是文本值。

你原来的代码把设置操作的返回值（DOM元素）当成了文本内容来用，自然就出问题啦！

修正后的代码 #

把设置和取值分开来做，直接用输入框的值传给PopcornJS就好：

$('#save').on('click', function() {
    // 先获取模态框输入框里的文本值
    var inputText = $('#newGoal').val();
    
    // 把值设置到页面的span里（这一步是你原来要做的显示）
    $('#value').text(inputText);
    
    // 把这个文本值传给PopcornJS脚注插件
    Popcorn.footnote({
        // 这里填你的脚注时间参数
        start: 2, 
        end: 5,
        text: inputText,
        target: '你的脚注容器ID'
    });
});

这样操作后，PopcornJS就能拿到正确的字符串，而不是DOM元素对象啦！

内容的提问来源于stack exchange，提问作者Dan Sen