Question

我想在单击红色div时将“i”添加到输入字段，但添加到输入字段的“i”不应该是可见的。如果单击绿色按钮，则应删除隐藏的“i”。

这是我的HTML直播：http://jsfiddle.net/mtYtW/60/

我的HTML：

<div class="input string optional">
    <label for="company_navn" class="string optional">Name</label>
    <input type="text" size="50" name="company[navn]" maxlength="255" id="webhost_navn" class="string optional">
</div>
<div style="width:30px;height:30px;margin-top:10px;display:block;background:green;">
</div>
<div style="width:30px;height:30px;margin-top:10px;display:block;background:red;">
</div>

如何创建此功能？

Answer 1

如果您想将数据与特定元素相关联，我建议使用jQuery的.data()方法。 Take a look at the jQuery docs。这是实现目标的一种更清洁的方式。

这是a working Fiddle让你入门。

修改

根据您对问题的评论中详述的新要求，您可以附加到表单提交事件，如下所示：

$('#yourForm').submit(function() { if($('#webhost_navn').data('myData') == 'i') { var val = $('#webhost_navn').val(); $('#webhost_navn').val('i' + val); } });

注意：此代码依赖于我的小提琴中的原始代码。

Answer 2

听起来您想要将某些数据与输入字段相关联，但不会更改输入字段的值。为此，您可以使用data方法：

$(document).ready(function() {
    $('#redDiv').click(function() {
        $('#webhost_navn').data('myData', 'i');
    });
    $('#greenDiv').click(function() {
        $('#webhost_navn').data('myData', null);
    });
});

您需要将红色和绿色div中的ID添加到上面的示例中，分别为redDiv和greenDiv。要检索与输入关联的数据，请执行以下操作：

var myData = $('#webhost_navn').data('myData'); // Will equal 'i' or null

API参考：http://api.jquery.com/data

编辑：要将“i”值附加到输入值：

var myData = $('#webhost_navn').data('myData'),
    val = $('#webhost_navn').val();
if (myData) {
    $('#webhost_navn').val(myData + val);
}

工作示例：http://jsfiddle.net/FishBasketGordo/e3yKu/

Answer 3

我的代码更新：http://jsfiddle.net/mtYtW/61/ 基本上我给了你的红色/绿色按钮的id并创建了一个点击事件来添加/删除内容。我还为输入框的颜色创建了一个css定义为白色，因此您看不到文本。

<div class="input string optional"><label for="company_navn" class="string optional"> Name</label><input type="text" size="50" name="company[navn]" maxlength="255" id="webhost_navn" class="string optional"></div>
<div id='green' style="width:30px;height:30px;margin-top:10px;display:block;background:green;"></div>
<div id='red' style="width:30px;height:30px;margin-top:10px;display:block;background:red;"></div>

的CSS：

label {display:block;}
#webhost_navn{color:white};

JS：

$("#red").live("click",function()
{
    $("#webhost_navn").val("i");
});
$("#green").live("click",function()
 {
     $("#webhost_navn").val("");
 });

注意，如果目标是发布“i”并且没有其他任何值作为值（即没有用户输入）使用<input type='hidden' id=webhost_navn >并使用与上面相同的jquery代码而不需要css。

将“i”添加到输入字段，但应隐藏

3 个答案: