u012503756
bulidfer
采纳率35.3%
2016-07-21 10:01 阅读 2.6k

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

15

完整的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 都没有了
图片说明

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

5条回答 默认 最新

  • 已采纳
    u012503756 bulidfer 2016-07-22 04:34

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

     /* 根据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>
    
    点赞 评论 复制链接分享
  • showbo GoCityPass新加坡曼谷通票 2016-07-21 10:08

    http://ask.csdn.net/questions/270831

    给retStr 赋值,你都没有依据已经选中的内容给retStr 这个变量赋值,还是空的,你再选中肯定没有了

    点赞 1 评论 复制链接分享
  • u012503756 bulidfer 2016-07-22 02:33

    图片说明

    这样改完之后 那个 id 为1 的一直去不掉

    点赞 1 评论 复制链接分享
  • u012503756 bulidfer 2016-07-22 02:26

    已经设置成 retstr 了 点击事件怎么修改

        $("#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, ''));
                            });
    

    下面是全部代码

     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 + ',',
                                            ',');
    
                                $("#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 = '';   
                    var retStr = "";
                    $.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 + ",";
                    }); 
    
                    $("#xueweis").val(retStr);//直接用js返回对应的穴位值给inupt赋值
                    var td2 = document.getElementById("xueweiTd2");
                    var div2 = document.getElementById("xuewei2");
                    div2.innerHTML = arrStr2;
                    td2.appendChild(div2);
    
                });
    
            }
        });
    
    }
    
    点赞 评论 复制链接分享
  • u012503756 bulidfer 2016-07-22 04:37

    图片说明

    点赞 评论 复制链接分享

相关推荐