0

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

我有一个文本字段，我想在<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 />

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

谢谢你。

4

4 回答 4

7

首先，不要使用内联 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()替代方案。

于 2012-12-29T13:53:29.467 回答
4

您可以将其当前值与可用的可能性进行比较。

<label id="toggle" for="stuff">I'm a label</label>
<input type="text" val="" name="stuff" id="stuff">​

var possibilities = ["foo", "bar"];

$('#toggle').click(function(){
    var old_val = $("#stuff").val(), new_val;
    if (old_val == possibilities[0])
        new_val = possibilities[1];
    else
        new_val = possibilities[0];

    $("#stuff").val(new_val);

});​

演示

于 2012-12-29T13:59:53.833 回答
4

为此，在第一次单击按钮时，您需要将输入的当前值存储在某个变量中，然后在第二次单击时，您可以将该变量分配给输入值。如果你不想有js文件，你可以简单地使用<script></script>标签来编写jquery。

    `<label id="label" onclick="replaceText('newvalue')">Click Mee</label>
<input id="html" type="text" value="some value">

    <script>
        var currentValue="";
   function replaceText(newval){
       currentValue= $("#html").val();
        if(currentValue!=newval)
        $("#html").val(newval);
   $("#label").attr("onclick","replaceText('"+currentValue+"')");// Here we assigned the other value to label onclick function so that it will keep on toggling the content.
   }
    </script>`

在这里演示

于 2012-12-29T13:45:44.293 回答
1

您可以将值存储到 JavaScript 变量中，并使用 jQueryclick方法而不是onclick属性。

var def = "<?php echo $image->convert('html_a', $image_data['image_link']); ?>",
    up = "<?php echo $image->convert('html_b', $image_data['image_link']); ?>";

$('label[for=html]').click(function() {
    $('#html').val(function(i, currentValue) {
        return currentValue === def ? up : def;
    });
});
于 2012-12-29T13:47:15.403 回答