Question

我列出了每个都有编辑链接的项目。如果我单击“编辑”链接，则会打开一个带有“保存”和“取消”按钮的输入。如果我单击取消它将返回原始视图。这很好。 FIDDLE

但是我想要点击保存按钮，如果我在输入字段中写了一些东西，它将保存并替换以前的文本。

就像我有文字＆＃39; Cras justo odio＆＃39; ，如果我点击编辑，它会打开一个输入字段，然后我写了＃34;这就是COOL＆＃34;然后按保存。现在发表文章＆＃39; Cras justo odio＆＃39;将替换为＆＃34;这就是COOL＆＃34;。我怎么能这样做？

提前致谢。

JS

$(".btn-link").click(function () {
    $(this).parent('.view-mode').hide();
    $(this).parent('.view-mode').siblings('.edit-mode').show();
});
$(".cancel-edit").click(function () {
    $(this).parent('.edit-mode').hide();
    $(this).parent('.edit-mode').siblings('.view-mode').show();
});

Answer 1

你必须添加：

$(".confirm-edit").click(function () {
  var inptext = $(this).siblings('input').val();
  $(this).parent('.edit-mode').siblings('.view-mode').children('span').text(inptext);
  $(this).parent('.edit-mode').hide();
  $(this).parent('.edit-mode').siblings('.view-mode').show();
});

小提琴：http://jsfiddle.net/has9L9Lh/38/

Answer 2

    $(".btn-link").click(function () {
    $(this).parent('.view-mode').hide();
    $(this).parent('.view-mode').siblings('.edit-mode').show();
});
$(".cancel-edit").click(function () {
    $(this).parent('.edit-mode').hide();
    $(this).parent('.edit-mode').siblings('.view-mode').show();
});
$(".confirm-edit").click(function () {
    $dft = $(this).parent('.edit-mode').siblings('.view-mode').find('span').text();   
    $(this).parent('.edit-mode').find('.form-control').val($dft);
    $val = $(this).parent('.edit-mode').find('.form-control').val();
    $(this).parent('.edit-mode').siblings('.view-mode').find('span').text($val);
    $(this).parent('.edit-mode').hide();
    $(this).parent('.edit-mode').siblings('.view-mode').show();
});

如何使用jquery更改文本值

2 个答案: