Question

当我点击第一个锚标记时，结果显示在下面，但是当我点击第二个锚标记时，第二个锚标记的结果显示在第二个标记下方，但是第一个锚标记下面的结果没有隐藏，结果是两者都分别显示。我们正在打印结果的锚标记和分区是动态生成的。

任何人都可以帮助我摆脱这个

这是我的jQuery代码

<script>
    $(document).ready(function () {

        var st = "1";
        var clLiID = 100;
        var fdevLiID = 300;
        var sdevLiID = 400;
        $('.p').click(function (e) {
            //alert("123");
            //e.preventDefault();
            var bid = 2;
            $.ajax({
                url: "<?php echo base_url(); ?>/afcks/search",
                data: {'b_id': bid},
                type: "POST",
                cache: false,
                success: function (data)
                {
                    //alert(data);
                    var sta = "";
                    var obj = $.parseJSON(data);
                    var result = "<ul id='loct' >";
                    $.each(obj, function ()
                    {
                        sta = this['branch_id'];
                        //alert(this['course_name']);
                        if (sta == 2)
                        {
                            result = result + "<li  item-checked='true' item-expanded='true' class='treeLi'><a Class='cours' id='alink' temp_id='" + fdevLiID + "' temp_id1='" + sdevLiID + "' cid='" + this['course_id'] + "' bid='" + this['branch_id'] + "' href='javascript:void(0);'>" + this['course_name'] + "</a></li><div class='" + clLiID + "' id='" + fdevLiID + "'></div><div id='" + sdevLiID + "'></div>";
                            fdevLiID++;
                            sdevLiID++;
                            clLiID++;
                        }
                    });
                    result = result + "</ul>";
                    //alert(result);
                    if (st == "1")
                    {
                        $('#img3').attr("src", "http://localhost/main/img/minus.png");
                        document.getElementById("cour1").innerHTML = result;
                        st = "2";
                    } else
                    {
                        $('#img3').attr("src", "http://localhost/main/img/plus.png");
                        document.getElementById("cour1").innerHTML = "";
                        st = "1";
                    }
                }
            });
        });
    });

</script>

<script type="text/javascript">

    var st1 = "1";
    $(document).on('click', '.cours', function () {
        //  $('.cours').removeClass("visited");
        //  $(this).addClass("visited");
        $(".cours").hide();
        var cid = $(this).attr("cid");
        var tempid = $(this).attr("temp_id");
        var tempid1 = $(this).attr("temp_id1");

        var bid = $(this).attr("bid");

        $.ajax({
            url: "<?php echo base_url(); ?>/afcks/search_course",
            data: {'c_id': cid, 'b_id': bid},
            type: "post",
            cache: false,
            success: function (data)
            {
                //alert(data);
                var obj = $.parseJSON(data);
                var heading = "";

                var status1 = "";
                var status2 = "";
                //var out="
                //<fieldset><legend>Confirmed Batches</legend>";

                var out = "<br/><p id='conf_p'>&nbsp&nbsp&nbsp&nbsp&nbspConfirmed Batches</p>";

                //out+="<center><table><tr><td>Confirmed Batches</td></tr></table>;
                out += "<table id='confirm_table'  border='2' cellpadding='1' cellspacing='0' rules=none >";
                //out+="<tr><td>Confirmed Batches</td></tr>";
                out += "<tr><th width='100' height='40' >&nbsp&nbspBatch Code</th><th width='100' height='45'><center>Start Date</center></th><th width='50' align='center' height='45'><center>Day</center></th><th width='120' align='center' height='45'><center>Batch time</center></th><th width='150' align='center' height='45'><center>Trainer</center></th><th width='100' align='center' height='45'><center>Frequency</center></th><th width='50' align='center' height='45' ><center>Fees</center></th><th width='110' align='center' height='45'><center>Duration</center></th>";
                var out1 = "<br/><p id='tent_p'>&nbsp&nbsp&nbsp&nbsp&nbspTentative Batches</p><table id='tentative_table' border=2 cellpadding='1' cellspacing='1' rules=none >";
                out1 += "<tr><th width='100' height='40' >&nbsp&nbspBatch Code</th><th width='100' height='45'><center>Start Date</center></th><th width='50' align='center' height='45'><center>Day</center></th><th width='120' align='center' height='45'><center>Batch time</center></th><th width='150' align='center' height='45'><center>Trainer</center></th><th width='100' align='center' height='45'><center>Frequency</center></th><th width='50' align='center' height='45' ><center>Fees</center></th><th width='110' align='center' height='45'><center>Duration</center></th>";
                for (var i = 0; i < obj.length; i++)
                {

                    var status = obj[i].batchtype;
                    var b_c = obj[i].batch_code;
                    var b_c = b_c.substring(0, 8);
                    var day = obj[i].frequency;
                    var day = day.substring(4, 9);

                    if (status == '1')
                    {
                        out += "<tr border='2' color='black' backgroundcolor=blue ><td width='100' >&nbsp&nbsp" + b_c +
                                "</td><td width='150' ><center>" + obj[i].new_start_date +
                                "</center></td><td width='50'  ><center>" + day +
                                "</center></td><td width='120' ><center>" + obj[i].timings +
                                "</center></td><td width='100' ><center>" + obj[i].faculty_Name +
                                "</center></td><td width='50' ><center>" + obj[i].frequency +
                                "</center></td><td width='50'  ><center>" + obj[i].fees +
                                "</center></td><td width='100' ><center>" + obj[i].duration +
                                "</center></td></tr>";
                        status1 = '1';
                    }
                    if (status == '2')
                    {
                        out1 += "<tr border='2' color='black' backgroundcolor=blue ><td width='100' >&nbsp&nbsp" + b_c +
                                "</td><td width='150' ><center>" + obj[i].new_start_date +
                                "</center></td><td width='50'  ><center>" + day +
                                "</center></td><td width='120' ><center>" + obj[i].timings +
                                "</center></td><td width='100' ><center>" + obj[i].faculty_Name +
                                "</center></td><td width='50' ><center>" + obj[i].frequency +
                                "</center></td><td width='50'  ><center>" + obj[i].fees +
                                "</center></td><td width='100' ><center>" + obj[i].duration +
                                "</center></td></tr>";
                        status2 = '2';
                    }
                }

                out += "<br /></table>";
                out1 += "<br /></table>";

                //alert(out);
                //alert(out1);
                //alert(st);
                if (st1 == "1")
                {
                    if (status1 == '1' && status2 == '2')
                    {
                        document.getElementById(tempid).innerHTML = out;
                        document.getElementById(tempid1).innerHTML = out1;
                    }
                    if (status1 == '1')
                    {
                        document.getElementById(tempid).innerHTML = out;
                    }
                    if (status2 == '2')
                    {
                        document.getElementById(tempid1).innerHTML = out1;
                    }
                    st1 = "2";
                } else
                {
                    document.getElementById(tempid).innerHTML = "";
                    document.getElementById(tempid1).innerHTML = "";
                    st1 = "1";
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
            }
        });
        //});
    });

</script>

这是我的HTML代码：

<div id="loc" >    
    <div id="locname"> 
        <ul class="loc" >
            <li>
                <div class="c">
                    <img id='img1'class="c" width="35" height="35" src=".\img\plus.png"/>&nbsp


                    <a href='javascript:void(0);' > Camp
                    </a>
                </div>
            </li>
    </div>
    <div id="cour">

    </div>
</ul>   

<div id="locname"> 
    <ul class="loct" >
        <li >

            <div class="p" >
                <img id='img3'class="p" width="35" height="35" src=".\img\plus.png"/>&nbsp

                <a href='javascript:void(0);' >Pimpri
                </a>

            </div>
        </li>
</div>
<!--<ul class="loct" >-->
<div div id="cour1" >

</div>
</ul>
</div>

Answer 1

这是你需要的吗？

$(document).ready(function() {

    var st = "1";
    var clLiID = 100;
    var fdevLiID = 300;
    var sdevLiID = 400;
    $('.p').click(function(e) {
        var bid = 2;
        var sta = "";
        var obj = [];
        obj.push({
            "branch_id": 2,
            "course_id": 100,
            "course_name": "course_1"
        });
        obj.push({
            "branch_id": 2,
            "course_id": 101,
            "course_name": "course_2"
        });
        obj.push({
            "branch_id": 1,
            "course_id": 102,
            "course_name": "course_3"
        });

        var result = "<ul id='loct' >";
        $.each(obj, function() {
            sta = this['branch_id'];
            //alert(this['course_name']);
            if (sta == 2) {
                result = result + "<li  item-checked='true' item-expanded='true' class='treeLi'><a Class='cours' id='alink' temp_id='" + fdevLiID + "' temp_id1='" + sdevLiID + "' cid='" + this['course_id'] + "' bid='" + this['branch_id'] + "' href='javascript:void(0);'>" + this['course_name'] + "</a></li><div class='newCls " + clLiID + "' id='" + fdevLiID + "'></div><div class='newCls' id='" + sdevLiID + "'></div>";
                fdevLiID++;
                sdevLiID++;
                clLiID++;
            }
        });
        result = result + "</ul>";
        //alert(result);
        if (st == "1") {
            $('#img3').attr("src", "https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-minus-empty-128.png");
            document.getElementById("cour1").innerHTML = result;
            st = "2";
        } else {
            $('#img3').attr("src", "https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-minus-empty-128.png");
            document.getElementById("cour1").innerHTML = "";
            st = "1";
        }
    });
});

var st1 = "1";
$(document).on('click', '.cours', function() {
    //  $('.cours').removeClass("visited");
    //  $(this).addClass("visited");
    $(".newCls").html('');
    var cid = $(this).attr("cid");
    var tempid = $(this).attr("temp_id");
    var tempid1 = $(this).attr("temp_id1");

    var bid = $(this).attr("bid");
    $(this).toggleClass('IsOpened');
    var IsShow = $(this).hasClass('IsOpened');
    $('.cours').removeClass('IsOpened');
    if (!IsShow) {
        document.getElementById(tempid).innerHTML = "";
        document.getElementById(tempid1).innerHTML = "";
        return;
    }
    $(this).addClass('IsOpened');
    var obj = [];
    obj.push({
        "batchtype": 2,
        "batch_code": "1001",
        "frequency": new Date().toString(),
        "new_start_date": "01-01-2017",
        "timings": "10.00",
        "faculty_Name": "faculty_1",
        "fees": "100",
        "duration": "10"
    });
    obj.push({
        "batchtype": 2,
        "batch_code": "1002",
        "frequency": new Date().toString(),
        "new_start_date": "02-01-2017",
        "timings": "11.00",
        "faculty_Name": "faculty_2",
        "fees": "50",
        "duration": "10"
    });
    obj.push({
        "batchtype": 1,
        "batch_code": "1003",
        "frequency": new Date().toString(),
        "new_start_date": "03-01-2017",
        "timings": "12.00",
        "faculty_Name": "faculty_3",
        "fees": "25",
        "duration": "10"
    });

    var heading = "";

    var status1 = "";
    var status2 = "";
    //var out="
    //<fieldset><legend>Confirmed Batches</legend>";

    var out = "<br/><p id='conf_p'>&nbsp&nbsp&nbsp&nbsp&nbspConfirmed Batches</p>";

    //out+="<center><table><tr><td>Confirmed Batches</td></tr></table>;
    out += "<table class='confirm_table' id='confirm_table'  border='2' cellpadding='1' cellspacing='0' rules=none >";
    //out+="<tr><td>Confirmed Batches</td></tr>";
    out += "<tr><th width='100' height='40' >&nbsp&nbspBatch Code</th><th width='100' height='45'><center>Start Date</center></th><th width='50' align='center' height='45'><center>Day</center></th><th width='120' align='center' height='45'><center>Batch time</center></th><th width='150' align='center' height='45'><center>Trainer</center></th><th width='100' align='center' height='45'><center>Frequency</center></th><th width='50' align='center' height='45' ><center>Fees</center></th><th width='110' align='center' height='45'><center>Duration</center></th>";
    var out1 = "<br/><p id='tent_p'>&nbsp&nbsp&nbsp&nbsp&nbspTentative Batches</p><table id='tentative_table' border=2 cellpadding='1' cellspacing='1' rules=none >";
    out1 += "<tr><th width='100' height='40' >&nbsp&nbspBatch Code</th><th width='100' height='45'><center>Start Date</center></th><th width='50' align='center' height='45'><center>Day</center></th><th width='120' align='center' height='45'><center>Batch time</center></th><th width='150' align='center' height='45'><center>Trainer</center></th><th width='100' align='center' height='45'><center>Frequency</center></th><th width='50' align='center' height='45' ><center>Fees</center></th><th width='110' align='center' height='45'><center>Duration</center></th>";
    for (var i = 0; i < obj.length; i++) {

        var status = obj[i].batchtype;
        var b_c = obj[i].batch_code;
        var b_c = b_c.substring(0, 8);
        var day = obj[i].frequency;
        var day = day.substring(4, 9);

        if (status == '1') {
            out += "<tr border='2' color='black' backgroundcolor=blue ><td width='100' >&nbsp&nbsp" + b_c +
                "</td><td width='150' ><center>" + obj[i].new_start_date +
                "</center></td><td width='50'  ><center>" + day +
                "</center></td><td width='120' ><center>" + obj[i].timings +
                "</center></td><td width='100' ><center>" + obj[i].faculty_Name +
                "</center></td><td width='50' ><center>" + obj[i].frequency +
                "</center></td><td width='50'  ><center>" + obj[i].fees +
                "</center></td><td width='100' ><center>" + obj[i].duration +
                "</center></td></tr>";
            status1 = '1';
        }
        if (status == '2') {
            out1 += "<tr border='2' color='black' backgroundcolor=blue ><td width='100' >&nbsp&nbsp" + b_c +
                "</td><td width='150' ><center>" + obj[i].new_start_date +
                "</center></td><td width='50'  ><center>" + day +
                "</center></td><td width='120' ><center>" + obj[i].timings +
                "</center></td><td width='100' ><center>" + obj[i].faculty_Name +
                "</center></td><td width='50' ><center>" + obj[i].frequency +
                "</center></td><td width='50'  ><center>" + obj[i].fees +
                "</center></td><td width='100' ><center>" + obj[i].duration +
                "</center></td></tr>";
            status2 = '2';
        }
    }

    out += "<br /></table>";
    out1 += "<br /></table>";

    if (status1 == '1' && status2 == '2') {
        document.getElementById(tempid).innerHTML = out;
        document.getElementById(tempid1).innerHTML = out1;
    }
    if (status1 == '1') {
        document.getElementById(tempid).innerHTML = out;
    }
    if (status2 == '2') {
        document.getElementById(tempid1).innerHTML = out1;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="loc" >    
    <div id="locname"> 
        <ul class="loc" >
            <li>
                <div class="c">
                    <img id='img1'class="c" width="35" height="35" src="http://www.freeiconspng.com/uploads/plus-icon-black-2.png"/>&nbsp


                    <a href='javascript:void(0);' > Camp
                    </a>
                </div>
            </li>
    </div>
    <div id="cour">

    </div>
</ul>   

<div id="locname"> 
    <ul class="loct" >
        <li >

            <div class="p" >
                <img id='img3'class="p" width="35" height="35" src="http://www.freeiconspng.com/uploads/plus-icon-black-2.png"/>&nbsp

                <a href='javascript:void(0);' >Pimpri
                </a>

            </div>
        </li>
</div>
<!--<ul class="loct" >-->
<div div id="cour1" >

</div>
</ul>
</div>

我刚刚使用粗略数据对所有ajax调用进行了硬编码。所做的更改是

$(this).toggleClass('IsOpened');
var IsShow = $(this).hasClass('IsOpened');
$('.cours').removeClass('IsOpened');
if (!IsShow) {
    document.getElementById(tempid).innerHTML = "";
    document.getElementById(tempid1).innerHTML = "";
    return;
}
$(this).addClass('IsOpened');

并删除

if (st1 == "1") {}

条件并将css class'newCls'添加到

<div class='newCls " + clLiID + "' id='" + fdevLiID + "'></div><div class='newCls' id='" + sdevLiID + "'></div>

带有ajax调用的最终脚本：

$(document).ready(function() {

    var st = "1";
    var clLiID = 100;
    var fdevLiID = 300;
    var sdevLiID = 400;
    $('.p').click(function(e) {
        var bid = 2;
        var sta = "";
        $.ajax({
            url: "<?php echo base_url(); ?>/afcks/search",
            data: {'b_id': bid},
            type: "POST",
            cache: false,
            success: function (data)
            {
                var obj = $.parseJSON(data);
                var result = "<ul id='loct' >";
                $.each(obj, function() {
                    sta = this['branch_id'];
                    //alert(this['course_name']);
                    if (sta == 2) {
                        result = result + "<li  item-checked='true' item-expanded='true' class='treeLi'><a Class='cours' id='alink' temp_id='" + fdevLiID + "' temp_id1='" + sdevLiID + "' cid='" + this['course_id'] + "' bid='" + this['branch_id'] + "' href='javascript:void(0);'>" + this['course_name'] + "</a></li><div class='newCls " + clLiID + "' id='" + fdevLiID + "'></div><div class='newCls' id='" + sdevLiID + "'></div>";
                        fdevLiID++;
                        sdevLiID++;
                        clLiID++;
                    }
                });
                result = result + "</ul>";
                //alert(result);
                if (st == "1") {
                    $('#img3').attr("src", "https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-minus-empty-128.png");
                    document.getElementById("cour1").innerHTML = result;
                    st = "2";
                } else {
                    $('#img3').attr("src", "https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-minus-empty-128.png");
                    document.getElementById("cour1").innerHTML = "";
                    st = "1";
                }
            }
        });
    });
});

var st1 = "1";
$(document).on('click', '.cours', function() {
    //  $('.cours').removeClass("visited");
    //  $(this).addClass("visited");
    $(".newCls").html('');
    var cid = $(this).attr("cid");
    var tempid = $(this).attr("temp_id");
    var tempid1 = $(this).attr("temp_id1");

    var bid = $(this).attr("bid");
    $(this).toggleClass('IsOpened');
    var IsShow = $(this).hasClass('IsOpened');
    $('.cours').removeClass('IsOpened');
    if (!IsShow) {
        document.getElementById(tempid).innerHTML = "";
        document.getElementById(tempid1).innerHTML = "";
        return;
    }
    $(this).addClass('IsOpened');
    $.ajax({
        url: "<?php echo base_url(); ?>/afcks/search_course",
        data: {'c_id': cid, 'b_id': bid},
        type: "post",
        cache: false,
        success: function (data)
        {
            var obj = $.parseJSON(data);
            var heading = "";

            var status1 = "";
            var status2 = "";
            //var out="
            //<fieldset><legend>Confirmed Batches</legend>";

            var out = "<br/><p id='conf_p'>&nbsp&nbsp&nbsp&nbsp&nbspConfirmed Batches</p>";

            //out+="<center><table><tr><td>Confirmed Batches</td></tr></table>;
            out += "<table class='confirm_table' id='confirm_table'  border='2' cellpadding='1' cellspacing='0' rules=none >";
            //out+="<tr><td>Confirmed Batches</td></tr>";
            out += "<tr><th width='100' height='40' >&nbsp&nbspBatch Code</th><th width='100' height='45'><center>Start Date</center></th><th width='50' align='center' height='45'><center>Day</center></th><th width='120' align='center' height='45'><center>Batch time</center></th><th width='150' align='center' height='45'><center>Trainer</center></th><th width='100' align='center' height='45'><center>Frequency</center></th><th width='50' align='center' height='45' ><center>Fees</center></th><th width='110' align='center' height='45'><center>Duration</center></th>";
            var out1 = "<br/><p id='tent_p'>&nbsp&nbsp&nbsp&nbsp&nbspTentative Batches</p><table id='tentative_table' border=2 cellpadding='1' cellspacing='1' rules=none >";
            out1 += "<tr><th width='100' height='40' >&nbsp&nbspBatch Code</th><th width='100' height='45'><center>Start Date</center></th><th width='50' align='center' height='45'><center>Day</center></th><th width='120' align='center' height='45'><center>Batch time</center></th><th width='150' align='center' height='45'><center>Trainer</center></th><th width='100' align='center' height='45'><center>Frequency</center></th><th width='50' align='center' height='45' ><center>Fees</center></th><th width='110' align='center' height='45'><center>Duration</center></th>";
            for (var i = 0; i < obj.length; i++) {

                var status = obj[i].batchtype;
                var b_c = obj[i].batch_code;
                var b_c = b_c.substring(0, 8);
                var day = obj[i].frequency;
                var day = day.substring(4, 9);

                if (status == '1') {
                    out += "<tr border='2' color='black' backgroundcolor=blue ><td width='100' >&nbsp&nbsp" + b_c +
                        "</td><td width='150' ><center>" + obj[i].new_start_date +
                        "</center></td><td width='50'  ><center>" + day +
                        "</center></td><td width='120' ><center>" + obj[i].timings +
                        "</center></td><td width='100' ><center>" + obj[i].faculty_Name +
                        "</center></td><td width='50' ><center>" + obj[i].frequency +
                        "</center></td><td width='50'  ><center>" + obj[i].fees +
                        "</center></td><td width='100' ><center>" + obj[i].duration +
                        "</center></td></tr>";
                    status1 = '1';
                }
                if (status == '2') {
                    out1 += "<tr border='2' color='black' backgroundcolor=blue ><td width='100' >&nbsp&nbsp" + b_c +
                        "</td><td width='150' ><center>" + obj[i].new_start_date +
                        "</center></td><td width='50'  ><center>" + day +
                        "</center></td><td width='120' ><center>" + obj[i].timings +
                        "</center></td><td width='100' ><center>" + obj[i].faculty_Name +
                        "</center></td><td width='50' ><center>" + obj[i].frequency +
                        "</center></td><td width='50'  ><center>" + obj[i].fees +
                        "</center></td><td width='100' ><center>" + obj[i].duration +
                        "</center></td></tr>";
                    status2 = '2';
                }
            }

            out += "<br /></table>";
            out1 += "<br /></table>";

            if (status1 == '1' && status2 == '2') {
                document.getElementById(tempid).innerHTML = out;
                document.getElementById(tempid1).innerHTML = out1;
            }
            if (status1 == '1') {
                document.getElementById(tempid).innerHTML = out;
            }
            if (status2 == '2') {
                document.getElementById(tempid1).innerHTML = out1;
            }
        }
    });
});

当我们点击第二个锚标记并动态生成锚标记时，如何关闭一个锚标记下面的分区

1 个答案: