jquery - 保留旧值的彩盒元素

Question

我正在尝试创建一个带有颜色框的模式窗口，以通过在颜色框中放置一个文本区域来更改报告标题，如下所示。

<a class="change-report-title" href="#edit-box">Change Title</a>

jQuery：

$(".change-report-title").colorbox({
    inline:true, 
    width:"400px",
    onOpen:function(){  
        var current_title = $("#report-title").html();
        $("#title-box-text").html(current_title);
    }
});

html:

   <div style="display:none">
       <div id="edit-box"> 
       Edit Report Title<br />
       <textarea id="title-box-text" name="title-box-text" cols="38" rows="5"></textarea>
       <br />
       <input id="title-box-change" name="title-box-change" type="button" value="Update" />
       </div>
   </div>

我在加载颜色框时尝试获取报告标题，它工作正常现在尝试使用 textarea 的编辑值更新标题，textarea 继续返回第一个值。

$("#title-box-change").click(function (e) {
    var new_title = $("#title-box-text").html();
    $("#report-title").html(new_title);
    return false;
});

有些事情我不只是做对了，我已经用谷歌搜索并搜索了 stackoverflow。任何想法将不胜感激。谢谢。

Answer 1

使用val()函数而不是html(). 此外，如果您需要获取/设置文本（不是 html 标记），最好使用 text() 方法而不是 html()。

对于代码的第一部分：

var current_title = $("#report-title").text();
                                      ^^^^^^^
$("#title-box-text").val(current_title);
                     ^^^^

对于点击事件：

$("#title-box-change").click(function (e) {
    var new_title = $("#title-box-text").val();
                                       ^^^^^^^^^
    $("#report-title").text(new_title);
                       ^^^^^
    return false;
});