总结骏汇项目的一些js逻辑问题（二）之添加意向银行并可排序

说到这个添加意向银行排序的问题，刚开始的时候自己没有思路，硬是写了很多代码去实现，最后发现其实是没有掌握问题的要点，没有理清问题的思路，虽然效果能实现但绝不是所最好的解决办法，所以也给之后的我做项目一个信号，功能问题一定要理清思路再去解决，否则只会让开始的问题不清晰，忽略了我们真正需要实现的功能。由于业务需要，现在是看不到的，但是我也来说一说这个需求需要实现的功能，以及如何实现的思路。

  首先来说一下这个意向银行需要实现的功能。其实就是有很多的意向银行你可以选择进行添加，但是不能超过三个，并且不能重复添加，这是其一。其二，添加完意向银行后，意向银行要能够进行排序，当然，所谓的排序肯定是能够进行上下排序的，那么相应的，不仅仅只是意向银行的内容变了，它的索引下标也会随着位置的改变而进行改变。其三，每个意向银行添加完后也可以进行删除。这就是需求。

下面到了关键一步，如何实现的思路是什么。

首先说一下第一个需求，不能超过三个，也就是添加了的意向银行的长度不能超过三，否则就得给错误提示；不能重复添加，也就是添加了的意向银行中的名字不能与点击添加时选中的银行的值相同，否则就得给一个错误的提示。

其次说一下意向银行排序，也是需求的重要一点，因为它的思路和删除的也差不多，我就连着一起说一下删除的思路。之所以说排序和删除的思路差不多，是因为这两个操作完后都需要索引下标的排序。既然如此，也就可以写一个公共的方法进行索引下标的排序。如果是删除，只要把那个添加的意向银行删掉，并进行索引下标的排序就好了。如果是向上排序，那么就要把选中的这个意向银行放到上一个的前面，并进行索引下标排序；如果是向下排序，那么就要把选中的意向银行放到下一个的后面。

既然思路都理清了，那么就来梳理一下代码。

代码不能理清的地方主要有两点，一个是不添加相同的意向银行，一个是索引下标的排序。

添加意向银行的代码如下：

 

//添加意向银行
$("#btnAddIntentionBank").click(function () {
    var obj = $("#sltIntentionBank");//下拉框
    var intentionBankId = obj.val();//意向银行id
    var intentionBankName = obj.find("option:selected").text();//选择的意向银行的名字
    if (intentionBankId == 0) {
        //添加时没有选择意向银行
        $.hbySystemTip("error", getLanguageDesByKey("Account.noIntBank"));
        return;
    }
    if ($(".lbIntentionBank").length >= 3) {
        //选择超过三个意向银行
        $.hbySystemTip("error", getLanguageDesByKey("Account.maxAddBank"));
        return;
    }
    var isExists = false;
    //判断要选择的意向银行是否存在于已经选择了的意向银行中
    $(".lbIntentionBank").each(function() {
        if ($(this).attr("data-bankId") == intentionBankId) {
            isExists = true;
            return false;
        }
    });
    if (isExists) {
        $.hbySystemTip("error", getLanguageDesByKey("Account.noRepeatAdd"));
        return;
    }
    $("#sltIntentionBank").val(0);
    $(".riseBank-tip").show();
    //添加意向银行
    $(".riseBank").append("<div class='lbIntentionBank' data-bankId='" + intentionBankId + "' ><span class='no'>" +
        ($(".lbIntentionBank").length + 1) + "</span>" + intentionBankName + "<i class='up'></i><i class='down'></i><i class='close'></i></div>");
});

 

 

以索引下标为主的意向银行的排序和删除如下：

 

//删除意向银行
$("#intentionBank").on("click", '.close', function () {
    $(this).closest(".lbIntentionBank").remove();
    resetBankSort();
});

//意向银行上排序
$("#intentionBank").on("click", ".up", function () {
    var curBank = $(this).closest(".lbIntentionBank");
    curBank.prev().before(curBank);//把当前的意向银行放到上一个的前面
    resetBankSort();
});

//意向银行下排序
$("#intentionBank").on("click", ".down", function () {
    var curBank = $(this).closest(".lbIntentionBank");
    curBank.next().after(curBank);//把当前的意向银行放到一下个的后面
    resetBankSort();
});

//索引下标的排序
function resetBankSort() {
    $("#intentionBank").find(".lbIntentionBank").each(function (index) {
        $(this).find("span").html(index + 1);
    });
}