javascript - jquery 如何向input value里追加值
問(wèn)題描述
<!DOCTYPE html><html><head> <title></title> <script type='text/javascript' src='http://m.b3g6.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>補(bǔ)水,</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>
我這里寫的是錯(cuò)的 我是想實(shí)現(xiàn) 點(diǎn)一下span 然后往input value里添加一個(gè)值
問(wèn)題解答
回答1：$('.box input').val($('.box input').val() + h)
回答2：$('.box input').val($('.box input').val()+$(this).text())回答3：
不知道你說(shuō)的追加是什么意思？我理解的是原來(lái)val是空字符串’’,點(diǎn)了一個(gè)‘補(bǔ)水，’，然后字符串拼接，val變成‘補(bǔ)水，’，再點(diǎn)了一個(gè)‘保濕，’，追加var就變成了‘補(bǔ)水，保濕，’
<!DOCTYPE html><html><head> <title></title> <script type='text/javascript' src='http://m.b3g6.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>補(bǔ)水,</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：
樓上說(shuō)的都對(duì)，你可能沒(méi)有理解append和直接賦值val（）的區(qū)別，append是把一個(gè)元素插入到已有的dom節(jié)點(diǎn)中，比如：
1. 把<span>補(bǔ)水,</span> 插入到p中var span = ’<span>補(bǔ)水,</span>’;$('p').append(span),此時(shí)span就被加入到p中了2. 而賦值直接是在input中給定一個(gè)值直接$('input').val(你需要插入的值)可以試試看<!DOCTYPE html><html> <head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'><title>時(shí)間</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>補(bǔ)水,</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>
相關(guān)文章：
1. javascript - immutable配合react提升性能？2. javascript - sublime快鍵鍵問(wèn)題3. javascript - nodejs關(guān)于進(jìn)程間發(fā)送句柄的一點(diǎn)疑問(wèn)4. javascript - 移動(dòng)端上不能實(shí)現(xiàn)拖拽布局嗎？5. 實(shí)現(xiàn)bing搜索工具urlAPI提交6. Apache 已經(jīng)把網(wǎng)站根目錄的改為allow from all了，但是服務(wù)器還是不能訪問(wèn)？7. css - 寫頁(yè)面遇到個(gè)布局問(wèn)題，求大佬們幫解答，在線等，急！~8. phpstudy8.1支持win11系統(tǒng)嗎？9. 配置Apache時(shí)，添加對(duì)PHP的支持時(shí)語(yǔ)法錯(cuò)誤10. vue.js - Vue 如何像Angular.js watch 一樣監(jiān)聽數(shù)據(jù)變化
網(wǎng)公網(wǎng)安備