为了账号安全,请及时绑定邮箱和手机立即绑定

JQ做的模拟手机发信息,有两个小问题想请教!

JQ做的模拟手机发信息,有两个小问题想请教!

bigzone 2016-04-14 10:53:50
<!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <title></title> <style> #box{ width:350px; margin:0 auto; } #screen{ width:350px; height:550px; background:#CCC; } .cboxl{                                               /*左侧对话样式*/ position:absolute; left:30px; display:inline-block; background:#0FF; margin:5px; padding:8px; border:#ccc 1px solid; border-radius:8px; text-align:left; } .cboxr{                                             /*右侧对话样式*/ position:absolute; right:30px; display:inline-block; background:#0F0; margin:5px; padding:8px; border:#ccc 1px solid; border-radius:8px; text-align:right; } .left{ float:left; } .right{ float:right; } .img1{ position:absolute; left:3px; top:10px; } .img2{ position:absolute; right:3px; top:10px; } .chatbox{ position:relative; padding:2px; } </style>   <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <script> $(function(){ var a = 1;                                                           //定义图片索引值 var $img1 = '<img src="pics/01.png">';       //左图片 var $img2 = '<img src="pics/02.png">';       //右图片 $('img').toggle(                                              //图片切换函数 function(){ $('img').attr('src','pics/02.png'); a = 2; }, function(){ $('img').attr('src','pics/01.png'); a = 1; }); $('button').click(                    //按钮发送函数 function(){ if($('input').val() == '')       //输入内容为空时弹出提示 { alert('不能为空'); } else  { if(a == 1)                       //图片为img1时屏幕的输出内容 { $('#screen').html( '<div>' + $img1 + '<div>'  + $('input').val() + '</div>' + '</div>'  + '<br>'+ '<br>' + $('#screen').html() ); $('input').val('');            //输入框清空 } else                                //图片为img2时屏幕的输出内容 { $('#screen').html( '<div>' + '<div>' + $('input').val() + '</div>' + $img2 + '</div>' + '<br>'+ '<br>' + $('#screen').html() ); $('input').val('');           //输入框清空 } } }) }) </script> </head> <body> <div id=box> <div id="screen"></div>                <!-- 屏幕主体 -->        <img src="pics/01.png"> <input type="text"> <button>sub</button> </div> </body> </html>这段代码想实现的功能,点击图片切换,对话框也会切换,模拟两个人发短信的效果存在的问题:1、点击切换图片后,对话框里的图片也会跟着切换2、对话框里的文字换行后,会被上一条的文字挡住请问如何解决呢
查看完整描述

1 回答

已采纳
?
不知名的前端程序猴

TA贡献32条经验 获得超22个赞

第一个问题,68行,$('img')  选取所有img标签。所以所有图片都会换;

第二个问题可以详细点吗?

查看完整回答
反对 回复 2016-04-14
  • bigzone
    bigzone
    第二个问题弄懂了,感谢你的回答
  • 1 回答
  • 0 关注
  • 1463 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信