javascript - Jquery动态输入值

Question

下面是我的代码

    <a href="#" onclick="$('#smiles_btn').click(); $('#chat_textarea').val($('#chat_textarea').val()+' :#').focus(); return false;"><img src="1.gif"></i></a>
    <a href="#" onclick="$('#smiles_btn').click(); $('#chat_textarea').val($('#chat_textarea').val()+' 8D').focus(); return false;"><img src="2.gif"></a>

如上面的代码所示，当用户单击笑脸图像时，它会更改文本区域 #chat_textarea 的值不同笑脸图像的值是不同的，上面的代码工作正常...但是如果我有超过 100 个笑脸怎么办？有什么办法可以改变 chat_textarea 的值动态地...？因为加载图像我只是 for 循环加载所有图像 1 to given number ...

更新:大家好，我知道我们可以使用类名

$('.add_smile').on('click', function(){
// Prepend the ALT of the image to the textarea
$('#chat_textarea').val( $('#chat_textarea').val()+ this.alt );
});

但我的问题不同...我无法为每个图像添加alt/值，它应该自动加载，比如获取;)从 json 文件传递​​ id ....有什么方法可以解决这个问题...

Answer 1

下面是一些更简单的 html。
如果您想动态加载它们，只需使用您选择的语言来循环数组:

// Php
foreach($smileys as $img=>$code){ echo '<img src="'.$img.'" alt="'.$code.'" />';}

// Javascript
$.each(smileys, funcion(index,smile){
   $('#smileWrap').append('<img src="'+smile.src+'" alt="'+smile.alt+'" />')
});

<小时/>

<img class="add_smile" src="/img1.jpg" alt=":)" />
<img class="add_smile" src="/img2.jpg" alt=":(" />
<img class="add_smile" src="/img3.jpg" alt=";)" />

$('.add_smile').on('click', function(){
    // Prepend the ALT of the image to the textarea
    $('#chat_textarea').val( $('#chat_textarea').val()+ this.alt );
});

jQuery 并不关心您添加点击的内容，图像就很好。如果你想要一个指针作为鼠标，只需使用 css 即可。

现在您可以使用 php 循环并根据需要放置任意数量的图像。图像需要有 alt，这是固定的。我们可以轻松地用 javascript 访问它，而不需要额外的 html( anchor )来获取它。

<强> My jsFiddle, with auto space-add if not present