动态更改文本输入值

Question

我的问题对你们来说可能很容易,但对我来说很难......

我有一个文本字段,我想在<label id="some_id">点击一次之间更改其值.直到我现在所描述的,我可以用jQuery自己做,但是这里有复杂的部分(显然对我来说):

我有两个我想要的文本字段<label>值,一旦单击它,它会切换到未显示的值,但是一旦我再次单击它,它将返回到包含文本字段的原始文本.

我必须保持我的jQuery/JS内部,因为我从数据库中获取所需的值,我不想创建我的.js文件.php.

这就是我得到的:

<label for="html" onclick="$('#html').val('<?php echo $image->convert('html_b', $image_data['image_link']); ?>')">HTML:</label>
<input type="text" id="html" value="<?php echo $image->convert('html_a', $image_data['image_link']); ?>" readonly />

它完成了我需要的第一部分,将字段的值更改为新值,但是再次单击该按钮后,我想要原始文本.

谢谢.

Answer 1

首先,不要使用内联JavaScript.

您可以为此使用.toggle()和data-*属性的组合.例如,使用data-toggle要切换的值的属性.

<label for="html" data-toggle="This is a placeholder">HTML:</label>
<input type="text" id="html" value="This is my real value" readonly>?

$("label[for][data-toggle]").each(function() {
    var $this = $(this);
    var $for = $("#" + $this.attr("for"));
    var originalValue;
    $this.toggle(function() {
        originalValue = $for.val();
        $for.val($this.data("toggle"));
    }, function() {
        $for.val(originalValue);
    });
});?

在这里看到它.

更新#1

我添加了for属性的使用<label>.

更新#2

如果.toggle()由于弃用通知而不想使用.

$("label[for][data-toggle]").each(function() {
    /* cache */
    var $this = $(this);
    var $for = $("#" + $this.attr("for"));
    var originalValue = $for.val();
    /* state variable */
    var which = 0;
    $this.click(function() {
        $for.val(which ? originalValue : $this.data("toggle"));
        which = 1 - which;
    });
});?

请参阅.toggle()此处的替代方案.