Javascript para Jquery, agregue texto en la entrada onclick

Question

¿Cómo puedo cambiar este código javascript a JQuery?

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

Cuando un usuario hace clic en el enlace se agrega automáticamente el texto en la entrada.

Este es el código 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> 

Aquí está la demostración: 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> 

y su margen de beneficio:

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

y aquí hay un live demo.

Answer 2

sin Javascript en línea, completamente 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

Algunas notas sobre los pasos:

• seleccione ya la entrada donde establecer el valor para evitar la necesidad de volver a consultar todo el tiempo: var $tagsInput = $('#text_tag_input');. El selector de etiquetas de hash si el selector de ID en jQuery, reemplaza document.getElementById

• unen un evento de clic con .click() para los enlaces dentro elemento con la clase "tags_select":. '$ (' Tags_select a') Haga clic en (. ..); ``

• para anexar el valor, en lugar de luchando con los métodos de jQuery para obtener y establecer el valor de la entrada, obtener el elemento DOM nativo con [0] en $tagsInput y el uso de la notación de la += propiedad value.

Aquí está el código:

// select already you input element for re-use 
var $tagsInput = $('#text_tag_input'); 

// bind a click event to links within ".tags-select" element 
$('.tags_select a').click(function() { 
    // append link text to the input field value 
    $tagsInput[0].value += $(this).text(); 
    return false; 
}); 

DEMO

Más información:

• jQuery selectors
• Bind a click event with .click()