【发布时间】：2017-07-13 05:50:29
【问题描述】：
当我单击第一个锚标记时，结果显示在其下方，但是当我单击第二个锚标记时，第二个锚标记的结果显示在第二个标记下方，但第一个锚标记下方的结果没有隐藏，结果两者分别显示。我们打印结果的锚标签和分区是动态生成的。
谁能帮我解决这个问题
这是我的 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'>     Confirmed 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' >  Batch 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'>     Tentative Batches</p><table id='tentative_table' border=2 cellpadding='1' cellspacing='1' rules=none >";
out1 += "<tr><th width='100' height='40' >  Batch 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' >  " + 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' >  " + 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"/> 
<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"/> 
<a href='javascript:void(0);' >Pimpri
</a>
</div>
</li>
</div>
<!--<ul class="loct" >-->
<div div id="cour1" >
</div>
</ul>
</div>
【问题讨论】：
-
就在通过调用 document.getElementById(tempid).innerHTML = ""; 使 ajax 调用清除所有锚标记 html 之前document.getElementById(tempid1).innerHTML = "";
标签： jquery html ajax show-hide