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);
    });
});

See it here.

更新＃1

我添加了for的{{1}}属性的使用。

更新＃2

如果由于弃用通知而不想使用<label>。

.toggle()

See the non-.toggle() alternative here.

Answer 2

为此，在第一个按钮上单击，您需要将输入的当前值存储在某个变量中，然后在第二次单击时，您可以将该变量分配给输入值。如果你不想拥有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>`

DEMO HERE

Answer 3

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

<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);

});

demo

Answer 4

您可以将值存储到JavaScript变量中，并使用jQuery click方法而不是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;
    });
});

动态更改文本输入值

4 个答案:

更新＃1

更新＃2

demo