0

如何使用.text()来修改文本，而不是选择元素中的其他元素？

var titleTextDiv = $('div#title-text'),
    editTitleDiv = $('div#title-edit'),
    editTitleInput = $('input[name=imageTitle]'),
    editTitleLink = $('a#edit-title'),
    saveTitleLink = $('a#save-title');

editTitleDiv.hide();
editTitleInput.val($.trim(titleTextDiv.text()));

editTitleLink.click(function() {
    titleTextDiv.hide();
    editTitleDiv.fadeIn('fast');
});

saveTitleLink.click(function() {
    editTitleDiv.hide();
    titleTextDiv.text($.trim(editTitleInput.val())).fadeIn('fast');
});

[ jsFIDDLE ] http://jsfiddle.net/2xMtQ/

目前，一切正常，除了标题更改为新值后，它会删除编辑/保存锚。为什么是这样？我能做些什么不同的事情？

4

3 回答 3

3

将目标文本包裹在 a 中<span>，例如：

<span id="title-target">Dem Bears</span>

并修改该跨度的文本而不是容器，例如：

var titleTextDiv = $('div#title-text'),
    titleTarget = $("#title-target"),
    editTitleDiv = $('div#title-edit'),
    editTitleInput = $('input[name=imageTitle]'),
    editTitleLink = $('a#edit-title'),
    saveTitleLink = $('a#save-title');

editTitleDiv.hide();
editTitleInput.val($.trim(titleTextDiv.text()));

editTitleLink.click(function() {
    titleTextDiv.hide();
    editTitleDiv.fadeIn('fast');
});

saveTitleLink.click(function() {
    editTitleDiv.hide();
    titleTarget.text($.trim(editTitleInput.val()));
    titleTextDiv.fadeIn("fast");
});

演示：http: //jsfiddle.net/2xMtQ/1/

此外，在通过 选择元素时不需要使用 tagName id，因为 jQuery 优化了以“#”开头的选择器的选择过程。当你在“#”之前使用某些东西时，jQuery 必须对选择器进行不必要的处理，并且效率低下。例如，使用$('#title-text')代替$('div#title-text').

查看 jQuery 源代码，.text("string")所做的是清空元素的内容，然后添加一个带有传入字符串的文本节点。这就是为什么您看到里面的所有内容都被替换。相关的jQuery：

this.empty().append( ( this[0] && this[0].ownerDocument || document ).createTextNode( value ) );

就像我说的，简而言之，就是清空元素并附加一个文本节点。

于 2013-04-24T21:19:49.507 回答
0

您在使用时看到元素被删除的原因text是因为该方法将“将匹配元素集中每个元素的内容设置为指定的文本”。

这似乎具有欺骗性，因为最初使用text时只会返回元素的文本，即使有嵌套的子元素也是如此。但是，setter 是一个完全不同的故事，它将覆盖其中的内容。

为了能够使用 jQuerytext只修改元素中的文本，您应该本地化您的文本，以便可以正确地定位它进行修改。

对 jQuery 文本的评论。

jQuerytext作为：

吸气剂

  • 获取匹配元素集中每个元素的组合文本内容，包括它们的后代。

二传手

  • 将匹配元素集中每个元素的内容设置为指定文本

（来源：jQuery API）

您的本地化问题

jsFiddle Demo

你需要稍微重组你的元素。文本将替换该区域内的所有内容，因此您可能希望使用文本跨度。这是一个修改后的版本作为建议：

<div id="title-div"><span id="title-text">Dem Bears</span>

然后在js中

var titleTextDiv = $('div#title-div'),
titleText = $('span#title-text'),
editTitleDiv = $('div#title-edit'),
editTitleInput = $('input[name=imageTitle]'),
editTitleLink = $('a#edit-title'),
saveTitleLink = $('a#save-title');

editTitleDiv.hide();
editTitleInput.val($.trim(titleText.text()));

editTitleLink.click(function() {
 titleTextDiv.hide();
 editTitleDiv.fadeIn('fast');
});

saveTitleLink.click(function() {
 editTitleDiv.hide();
 titleText.text($.trim(editTitleInput.val()));
 titleTextDiv.fadeIn('fast');
});
于 2013-04-24T21:22:38.463 回答
0

如果您真的想要，您可以更改.text()以保留节点并替换文本

$.fn.text = function ( value ) {
    return jQuery.access( this, function( value ) {
        if(value === undefined){
            return jQuery.text( this );
        }else{
        var childNodes = this.children().detach();
        return this.empty().append( ( this[0] && this[0].ownerDocument || document ).createTextNode( value ) ).append(childNodes);
        }
    }, null, value, arguments.length );
}

尽管我建议将其添加为附加功能

$.fn.textPreserveNodes

小提琴：http: //jsfiddle.net/2xMtQ/10/

于 2013-04-24T21:33:45.880 回答