缩短几个元素的onclick代码 - javascript

时间:2013-11-15 20:46:03

标签: javascript

您好我有60个图片标签..点击每个标签会在文本框中显示不同的文字..所以我想知道而不是在每个图片标签中键入javascript代码是否有任何方法可以使用单个javascript函数...并将该函数放入每个图像标记的onclick=""事件中...希望我自己清楚......任何帮助都会受到赞赏...在此先感谢... :)哦,以下是所有60个图像标签...

    <img src='smileys/birthday.gif' style="height:22px;margin:3px;" />
<img src='smileys/blue.gif' style="height:22px;margin:3px;" />
      <img src='smileys/blush.gif' style="height:22px;margin:3px;" />
      <img src='smileys/boo.gif' style="height:22px;margin:3px;" />
      <img src='smileys/book.gif' style="height:22px;margin:3px;" />
      <img src='smileys/busted.gif' style="height:22px;margin:3px;" />
      <img src='smileys/goodnight.gif' style="height:22px;margin:3px;" />
      <img src='smileys/newhere.gif' style="height:22px;margin:3px;" />
      <img src='smileys/nicethread.gif' style="height:22px;margin:3px;" />
      <img src='smileys/nospamhere.gif' style="height:22px;margin:3px;" />
      <img src='smileys/offtopic.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-ashamed004.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-confused001.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-confused013.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-dance012.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-dance019.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-excited001.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-fart004.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-fart005.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-finger005.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-gen013.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-gen041.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-gen055.gif' style="height:22px;margin:3px;" />
     <img src='smileys/smiley-gen073.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-happy011.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-happy020.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-happy120.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-hug001.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-hug004.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-hug005.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-hug006.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-hug014.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-hug015.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-laughing001.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-laughing002.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-love001.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-love007.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-love010.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-love018.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-love019.gif' style="height:22px;margin:3px;" />
     <img src='smileys/smiley-love022.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-love025.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-love027.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-love028.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-taunt002.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-taunt014.gif' style="height:22px;margin:3px;" />
      <img src='smileys/welcome.gif' style="height:22px;margin:3px;" />
     <img src='smileys/smiley-sad008.gif' style="height:22px;margin:3px;" />
      <img src='smileys/wtf.gif' style="height:22px;margin:3px;" />  
     <img src='smileys/smiley-confused002.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-angelic002.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-cool02.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-devil03.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-happy112.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-happy119.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-sad056.gif' style="height:22px;margin:3px;" />
      <img src='smileys/smiley-sad007.gif' style="height:22px;margin:3px;" /> 
      <img src='smileys/smiley-confused005.gif' style="height:22px;margin:3px;" />
      <img src='smileys/cheekkiss.gif' style="height:22px;margin:3px;" />
     <img src='smileys/toj.png' style="height:22px;margin:3px;" />

1 个答案:

答案 0 :(得分:2)

将您在该文本框中显示的文本添加为​​数据属性:

<img src='smileys/birthday.gif' data-text="Happy birthday" style="..." />

并做

$('img').on('click', function() {
    $('#textbox').text( $(this).data('text') );  // or val() if it's an input
});

如果您有其他不适用的图像,请改用类作为选择器。