后台传来的json数组的id值 和 前端修改的值就行整合

Question

完整的json数组包含一个小的json数组 点击完整json数组的其他元素时小json数组返回的值也没了
**
实际上点击任何一个元素 之前的都会消失 而且心 和肝 点击后背景不会退掉**

                  var arr1 = [ { "name" : "心", "acupoint_num" : "1" }, { "name" : "肝",
                  "acupoint_num" : "2" }, { "name" : "脑袋", "acupoint_num" : "3" }, { "name" : "屁股",
                  "acupoint_num" : "4" } ];

                var retStr = ",";
                $('#xueweiList').append(
                        $(arr1).map(
                                function() {
                                    return '<li id=' + this.acupoint_num
                                            + '><a href="#" >' + this.name
                                            + '</a></li><li>'
                                }).get().join(''));
                $("#nav>ul>li").click(
                        function() {
                            var focus = $(this).toggleClass('h_nav_over')
                                    .hasClass('h_nav_over');
                            if (focus)
                                retStr += this.id + ',';
                            else
                                retStr = retStr.replace(',' + this.id + ',',
                                        ',');

                            $("#xueweis").val(retStr.replace(/^,|,$/g, ''));
                        });


                /* 2-获取疾病对应穴位 */
                var arr2 = [ { "earName" : "心", "acupoint_num" : "1" }, { "earName" : "肝",
                      "acupoint_num" : "2" } ];
                var arrStr2 = '';   
                var xueweisStr = "";
                $.each(arr2, function(index2, item) { // 获取后台传来的json是数组
                    arrStr2 += "<input type='button' id='"
                            + arr2[index2].acupoint_num + "' value='"
                            + arr2[index2].earName + "' name='earName'/>";                      
                $.each(arr1, function(index, item) {
                    if(arr2[index2].acupoint_num==arr1[index].acupoint_num){
                        $("#"+arr1[index].acupoint_num).css({"background-color":"#98bf21"});
                                $("#xueweis").val(xueweisStr);//直接用js返回对应的穴位值给inupt赋值

                        }
                });

                xueweisStr += arr2[index2].acupoint_num + ",";

                }); 

                $("#xueweis").val(xueweisStr);//直接用js返回对应的穴位值给inupt赋值
                var td2 = document.getElementById("xueweiTd2");
                var div2 = document.getElementById("xuewei2");
                div2.innerHTML = arrStr2;
                td2.appendChild(div2);

            });

这个是没有点击脑袋之前 小的json数组包含 1 和2 两个id 对应 心和肝

这个是点击脑袋之后 1 和2 都没有了

Answer 1

终于实现了 把代码贴出来 就是版面还没有弄好

 /* 根据id修改用户信息 pjc 2016.4.21 */
function updateEd100(id) {

    $.ajax({
        type : "POST",
        url : "/miaolangzhong/manage/forAjax.do?requestType=6",
        data : "id=" + id, // 发送到服务器的数据
        success : function(msg) {
            alert(msg);
            var json = eval('(' + msg + ')');
            document.getElementById("addEd100").style.display = "block";
            /* 获取后台传来的json是数组 循环获取数据 */
            $.each(json, function(index, item) {
                document.getElementById("id1").value = json[index].id;
                document.getElementById("name1").value = json[index].name;
                document.getElementById("desc1").value = json[index].desc;          
                /*1- 获取所有穴位 包括下面的事件是一个整体 */
                /*var arr1 = eval(json[index].xuewei);*/

                  var arr1 = [ { "name" : "心", "acupoint_num" : "1" }, { "name" : "肝",
                  "acupoint_num" : "2" }, { "name" : "脑袋", "acupoint_num" : "3" }, { "name" : "屁股",
                  "acupoint_num" : "4" } ];

                var retStr = ",";
                $('#xueweiList').append(
                        $(arr1).map(
                                function() {
                                    return '<li id=' + this.acupoint_num
                                            + '><a href="#" >' + this.name
                                            + '</a></li><li>'
                                }).get().join(''));
                $("#nav>ul>li").click(
                        function() {
                            var focus = $(this).toggleClass('h_nav_over')
                                    .hasClass('h_nav_over');
                            if (focus)
                                retStr += this.id + ',';
                            else
                                /*retStr = retStr.replace(',' + this.id + ',',
                                        ',');*/
                            retStr = retStr.replace(',' + this.id + ',',
                            ',');

                            $("#xueweis").val(retStr.replace(/^,|,$/g, ''));
                        });


                /* 2-获取疾病对应穴位 */
                /*var arr2 = eval(json[index].ear_acupoint);*/
                var arr2 = [ { "earName" : "心", "acupoint_num" : "1" }, { "earName" : "肝",
                      "acupoint_num" : "2" } ];
                var arrStr2 = '';                                   
                $.each(arr2, function(index2, item) { // 获取后台传来的json是数组
                    arrStr2 += "<input type='button' id='"
                            + arr2[index2].acupoint_num + "' value='"
                            + arr2[index2].earName + "' name='earName'/>";  

                $.each(arr1, function(index, item) {//大数组嵌套在小数组
                    if(arr2[index2].acupoint_num==arr1[index].acupoint_num){
                        //$("#"+arr1[index].acupoint_num).css({"background-color":"#98bf21"});
                        $("#"+arr1[index].acupoint_num).addClass('h_nav_over');
                    }
                });             
                retStr += arr2[index2].acupoint_num + ",";      
                }); 
                /*//去掉第一个逗号
                if (retStr.substr(0,1)==',') retStr=retStr.substr(1);
                //去掉最后一个逗号
                var reg=/,$/gi; 
                retStr=retStr.replace(reg,"");*/ 

                $("#xueweis").val(retStr.replace(/^,|,$/g, ''));
                //$("#xueweis").val(retStr);//直接用js返回对应的穴位值给inupt赋值
                var td2 = document.getElementById("xueweiTd2");
                var div2 = document.getElementById("xuewei2");
                div2.innerHTML = arrStr2;
                td2.appendChild(div2);

            });

        }
    });

}

本体部分

 <div id="addEd100"
    style='display: none; z-index: 11; left: 0px; top: 0px; width: 100%; height: 100%; position: absolute;'>
    <form action="/miaolangzhong/manage/forJsp.do?requestType=16"
        method="post">
        <table width="99%" border="0" cellpadding="0" cellspacing="0"
            class="CContent">
            <tr>
                <th class="tablestyle_title">世界卫生组织推荐</th>
            </tr>
            <tr>
                <td class="CPanel">

                    <table border="0" cellpadding="0" cellspacing="0"
                        style="width: 100%">
                        <TR>
                            <TD width="100%">
                                <fieldset style="height: 100%;">
                                    <legend>世界卫生组织推荐</legend>
                                    <table border="0" cellpadding="2" cellspacing="1"
                                        style="width: 100%">
                                        <tr>
                                            <input type="hidden" name="id1" id="id1" onblur="Checkname()" />

                                            <!-- 编辑后跳转到当前的列表页 -->
                                            <input type="hidden" value=${page.num } id="currentPageNum2"
                                                name="currentPageNum2">
                                            <!-- 添加后跳转到最后页面 -->
                                            <input type="hidden" value=${page.count } id="pageCount"
                                                name="pageCount">
                                            <td nowrap align="right" width="15%">疾病名称:</td>
                                            <td width="35%"><input name='name' type="text"
                                                id="name1" class="text" style="width: 154px" value="" /> <span
                                                class="red">*</span></td>

                                        </tr>
                                        <tr>
                                            <td width="15%" nowrap align="right" height="100">简介:</td>
                                            <td colspan="3"><textarea name="desc" cols="100"
                                                    id="desc1" rows="10"></textarea></td>
                                        </tr>
                                        <tr>
                                            <td width="15%" nowrap align="right" height="100">对应的穴位:</td>
                                            <td colspan="3" id="xueweiTd2"><div id="xuewei2"
                                                    class="h_nav_over"></div></td>
                                        </tr>
                                        <tr>
                                            <td width="15%" nowrap align="right" height="100">取穴:</td>
                                            <td colspan="3" id="xueweiTd">
                                                <div id="nav">

                                                    <ul id="xueweiList"></ul>
                                                    <input id="xueweis" name="xueweis">

                                                </div> 
                                            </td>

                                        </tr>
                                    </table>
                                    <br />
                                </fieldset>
                            </TD>
                        </TR>
                    </TABLE>


                </td>
            </tr>
            <TR>
                <TD colspan="2" align="center" height="50px"><input
                    type="submit" name="Submit" value="保存" class="button"
                    onclick="alert('保存成功！');" /> <input type="button" name="Submit2"
                    value="返回" class="button" onclick="window.history.go(-1);" /></TD>
            </TR>
        </TABLE>
    </form>
</div>

css 样式部分

 <style type="text/css">
.ul, li {
    list-style: none;
}

#nav li {
    display:table-cell;
    border:1px solid #666666;
    margin: 0 5px;
    background: #ccc;
    padding: 0px 0px;
    line-height: 24px;
    font-size: 12px;
    float:left;
}

#nav li.h_nav_over {
    background: red;
    color: #fff;
}

#nav li.h_nav_over a {
    color: #fff;
}

a {
    text-decoration: none;
}
</style>