在此做些笔记,总结下这段时间敲代码遇到的些问题,小白刚入门真是好多坑。
一、直通车的一个列表展示
加载更多的实现
首先所需要的数据allData可以是静态的,也可以是通过向服务器端发起请求获取到的。要实现的就是每次点击“加载”按钮,就会有新的数据展现出来,我们需要做的就是将所有数据allData切分,按顺序每次用户点击就显示一部分。
我们可以定义一个pageNum为页数,初始可以设为1,之后每次点击加载的时候让这个值累加。
$(".load").on("click",function () {
pageNum++;
li="";
datalist = datalist1_all.slice(4*(pageNum-1),4*pageNum);//4为每次显示数目
li = show(datalist);
$(".order .order_content").eq(0).append(li);//每次将新内容进行添加
})
function show(datalist) {
var li="";
for(var i=0;i<datalist.length;i++){
var curData = datalist[i];
li += '<li>' +
'<div class="vote_content" data-id="'+curData.id+'">' +
'<div class="shanxing"><span>'+ curData.id+'</span></div></li>'
}
return li;
}
主要就是针对slice这个方法的一个运用,感觉一个小小的函数就可以实现一个想要的功能。
2.本地环境与测试环境调用不同接口
用于在实际开发中,不同的环境需要用到的接口是不同的,这时候需要通过域名判断来进行区分。判断如果域名中含有端口号3005就启用测试的,否则就是正式的。不过这样写是在开发阶段的时候好分别测试不同的环境,正在发布的时候就没必要如此,直接写出固定的就好。
if(window.location.href.indexOf("3005")>-1){
host = "http://testmd.np.123.com";//请求测试
}else{
host = "http://md.np.123.com";//请求正式
}
二、妇联新闻网站中使用jquery出错
之前使用jquery的时候,一直都是很通畅的,但是有一次突然报错说$.不是一个funtion等等等的错误,查了半天发现是因为jquery中的$可能与其他的一些插件中的$符号冲突。
解决方式也很简单,使用noConflict() 方法会释放会 $ 标识符的控制,这样其他脚本就可以使用它了。
var jq=jQuery.noConflict();
jq(document).ready(function() {
try {
jq(".linkBox").hide();
jq(".linkBox")
.eq(0)
.show();
} catch (e) {}
});
三、电影投票,ios失效
所有的电影列表信息是动态生成的,包括其中的投票按钮。
$(document).on("click",".instead",function () {
....
})
上面是刚开始的写法,将点击事件绑定在document上。出现的问题就是安卓上一切正常,但是ios上点击没有反应。
后面尝试的解决方式是不使用click事件,使用touchstart代替。
var startevent = 'touchstart' in document.documentElement ? "touchstart" : "mousedown";
$(document).on(startevent,".instead",function () {
....
})
改动后,安卓和ios端都可以生效了,但是过于灵敏。由于touchstart是只要碰触到就会生效,意思是进行滑动操作不是点击滑动也会生效。这样显然不行,最后进行改动成以下方法成功了。对所有的.instead方法进行遍历,并单独添加click方法。自我分析可能的原因不同浏览器的内核对js的解析不同,ios对动态加载在document的事件监听无法处理。
$(".instead").each(function () {
$(this).click(function () {
......
})
});
四、科协投票
1.复制功能
正常的复制功能,是对html页面上的内容进行复制,先调用select()方法选中要复制的内容,再document.execCommand("copy")进行复制。但是项目的需求是图片中的文字,这就需要在js中放置需要复制的内容。动态添加标签,绑定文字,复制完成后再删除该标签。
function copyText(text) {
var textarea = document.createElement("textarea");
var currentFocus = document.activeElement;
$(".condition").append(textarea);
$(".introduction").append(textarea);
textarea.value = text;
textarea.focus();
if (textarea.setSelectionRange)
textarea.setSelectionRange(0, textarea.value.length);
else
textarea.select();
try {
var flag = document.execCommand("copy");
} catch(eo){
var flag = false;
}
$(".condition textarea").remove();
$(".introduction textarea").remove();
currentFocus.focus();
return flag;
}
copyText("复制的内容");
2.置顶功能
首先监听document的滚动事件,并获取距离顶部的高度,超过一定的高度以后就可以将置顶按钮显示出来。
然后对置顶按钮绑定点击事件,添加一个animate动画,使scrollTop为0即可。
$(document).scroll(function () {
var distance =$(window).scrollTop();
if(distance >1500){
$(".btn").show();
}else{
$(".btn").hide();
}
});
$(".btn").click(function () {
$("html,body").animate({scrollTop:0},600);
return false;
})
五、报名体验营网页跳走
出现的问题大致是这样,在报名表单提交以后会自动跳走(用的统一的模板接口,报名成功与否都会跳走)。
<form action="http://np.123.com/service/v1/submit?_charset=UTF-8&_decode=UTF-8" method="post" id="form1" target="tip">
<!-- <input name="_success" type="hidden" value=""/>-->
<!-- <input name="_fail" type="hidden" value=""/>-->
<div class="name">
<span>姓名:</span>
<input name="name" type="text" value="" id="name"/>
</div>
<div class="phone">
<span>电话:</span>
<input name="tel" type="text" value="" id="tel"/>
</div>
<div class="tijiao"></div>
</form>
<iframe name="tip" style="display: none"></iframe>
解决的方法我觉得挺巧妙的,利用form的target属性,它的值布置可以是_target,_self之类的,还可以设置成为一个指定的框架的name,这样我们只要在页面中定义一个相应的iframe,并把它设为不可见即可。这样就完成页面不会跳走的操作了。