javascript - jquery 如何向input value里追加值
问题描述
<!DOCTYPE html><html><head> <title></title> <script type='text/javascript' src='https://www.haobala.com/wenda/jquery-1.8.2.min.js'></script></head><style type='text/css'> .box{width: 600px;height: 300px;border: 1px solid #ccc;margin: 0 auto} .func span{margin-right: 10px;cursor: pointer;}</style><body><p class='box'> <input type='text' name='' value=''></p><p class='func'> <span>补水,</span><span>保湿,</span><span>去皱,</span><span>美白,</span></p></body><script type='text/javascript'> $('.func span').click(function(){h=$(this).html();$('.box input').attr('value').append(h); });</script></html>
我这里写的是错的 我是想实现 点一下span 然后往input value里添加一个值
问题解答
回答1：$('.box input').val($('.box input').val() + h)
回答2：$('.box input').val($('.box input').val()+$(this).text())回答3：
不知道你说的追加是什么意思？我理解的是原来val是空字符串’’,点了一个‘补水，’，然后字符串拼接，val变成‘补水，’，再点了一个‘保湿，’，追加var就变成了‘补水，保湿，’
<!DOCTYPE html><html><head> <title></title> <script type='text/javascript' src='https://www.haobala.com/wenda/jquery-1.8.2.min.js'></script></head><style type='text/css'> .box{width: 600px;height: 300px;border: 1px solid #ccc;margin: 0 auto} .func span{margin-right: 10px;cursor: pointer;}</style><body><p class='box'> <input type='text' name='' value=''></p><p class='func'> <span>补水,</span><span>保湿,</span><span>去皱,</span><span>美白,</span></p></body><script type='text/javascript'> $('.func span').click(function(){h=$(this).text();$('#id_box_input').val($('#id_box_input').val + h); });</script></html>回答4：
$('.func span').click(function(){ var text = $(this).text(); var $input = $('.box input') $input.val($input.val()+text);});回答5：
楼上说的都对，你可能没有理解append和直接赋值val（）的区别，append是把一个元素插入到已有的dom节点中，比如：
1. 把<span>补水,</span> 插入到p中var span = ’<span>补水,</span>’;$('p').append(span),此时span就被加入到p中了2. 而赋值直接是在input中给定一个值直接$('input').val(你需要插入的值)可以试试看<!DOCTYPE html><html> <head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'><title>时间</title> <style type='text/css'> .box{width: 600px;height: 300px;border: 1px solid #ccc;margin: 0 auto} .func span{margin-right: 10px;cursor: pointer;}</style><script type='text/javascript' src='https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js'></script><body><p id='p'> <input type='text' name='' value=''></p><p class='func'> <span>补水,</span><span>保湿,</span><span>去皱,</span><span>美白,</span></p></body><script type='text/javascript'> $('.func span').click(function(){h = $(this).html();$('.box input').val($('.box input').val() + h); // val$('#p').append(h); // append });</script></html>
相关文章：
1. PHP中的$this代表当前的类还是方法？2. javascript - vue2.0中使用vue2-dropzone的demo，vue2-dropzone的github网址是什么？？百度不到。3. html5 - 目前 公司App 嵌入H5页面 做个 手机支付功能 没有做过 所以 请求各位有经验的 给个思路4. IOS app应用软件的id号怎么查询？比如百度贴吧的app-id=4779278135. html - 这种错位的时间轴怎么布局，然后用css实现？6. javascript - avalon.js ms-on 事件绑定无效 ?7. java - 如图代码，Collection 类中的iterator（）是抽象方法，为什么可以调用？8. 鼠标过导航标签时，无效果，请问如何查找问题9. java - spring-data Jpa 不需要执行save 语句，Set字段就可以自动执行保存的方法？求解10. java - butterknife怎么绑定多个view
网公网安备