Question

如何将此javascript代码更改为JQuery。

<script type="text/javascript">
   function addTextTag(text){
    document.getElementById('text_tag_input').value += text;
   }        
</script>

当用户点击链接文本时，会自动添加输入。

这是HTML：

<input id="text_tag_input" type="text" name="tags" />

<div class="tags_select">
    <a href="#" onClick="addTextTag('text1, '); return false">text1</a>
    <a href="#" onClick="addTextTag('text2, '); return false">text2</a>
    <a href="#" onClick="addTextTag('text3, '); return false">text3</a>
</div>

以下是演示：http://jsfiddle.net/Smartik/j8qGT/

Answer 1

<script type="text/javascript">
    $(function() {
        $('.tags_select a').click(function() {
            var value = $(this).text();
            var input = $('#text_tag_input');
            input.val(input.val() + value + ', ');
            return false;
        });
    });
</script>

和你的标记：

<input id="text_tag_input" type="text" name="tags" />

<div class="tags_select">
    <a href="#">text1</a>
    <a href="#">text2</a>
    <a href="#">text3</a>
</div>

这里是live demo。

Answer 2

没有内联javascript，完全是jQuery： http://jsfiddle.net/j8qGT/3/

JavaScript的：

$('a').click(function(){
    $('#text_tag_input').val($('#text_tag_input').val()+$(this).html()+', ');
});

HTML：

<input id="text_tag_input" type="text" name="tags" />

<div class="tags_select">
    <a href="#">text1</a>
    <a href="#">text2</a>
    <a href="#">text3</a>
</div>

Answer 3

关于步骤的一些注意事项：

选择已设置值的输入，以便您无需一直重新查询它：var $tagsInput = $('#text_tag_input');。如果jQuery中的ID选择器替换document.getElementById
使用.click（）绑定一个click事件，用于元素中带有“tags_select”类的链接：`$（'。tags_select a'）。click（...）;``
要附加值，而不是使用jquery方法奋斗来获取和设置输入的值，请在{{1}上获取[0]的原生DOM元素并使用属性$tagsInput的{{1}}表示法。

以下是代码：

+=

<强> DEMO

进一步阅读：

Javascript到Jquery，在输入onclick中添加文本

3 个答案: