温故知新——总结项目中的问题（一）

在此做些笔记，总结下这段时间敲代码遇到的些问题，小白刚入门真是好多坑。

一、直通车的一个列表展示

加载更多的实现

首先所需要的数据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，并把它设为不可见即可。这样就完成页面不会跳走的操作了。