我有一个主要主题流的列表。比方说它们是艺术、科学、商业。每种主流都有几个主题。如理科,科目为数学、生物科学等。
当用户选择主流时,我想显示所选主流的相关主题。我使用jquery面板。基本上,当一个流被选中时,相关的主题div将被切换。
我得到了主流和主题来自数据库。它们可以是变化的(动态的)。那么如何处理呢?
我使用了以下代码。但这并不是动态的。
$("#Science").change(function(){
$("#Mathas").slideToggle("fast");
});
$("#Bio_cience").change(function(){
$("#b").slideToggle("fast");
});
$("#Pure_Maths").change(function(){
$("#cc").slideToggle("fast");
});
我想让上面的脚本动态。如何继续?
您的复选框和div之间需要一些共同的东西,而且您可能不需要再次访问服务器(通过ajax)即可实现这一点。相反,在使用PHP生成页面时添加一个属性,然后使用jQuerydata()方法来帮助建立关联。例如:
<input type="checkbox" data-category="a">
<input type="checkbox" data-category="b">
<div id="main-stream-art-a">Content A</div>
<div id="main-stream-art-b">Content B</div>
<script>
$(function(){
$('input[type="checkbox"]').change(function() {
var category = $(this).data('category');
$('#main-stream-art-sub-' + category).slideToggle("fast");
});
})
</script>
您的html会喜欢。。。
<div id="1sub" class="sub">sub1</div>
<div id="2sub" class="sub">sub2</div>
<div id="3sub" class="sub">sub3</div>
<div id="stream-1" class="stream" style="display:none;">Stream 1</div>
<div id="stream-2" class="stream" style="display:none;">Stream 2</div>
<div id="stream-3" class="stream" style="display:none;">Stream 3</div>
现在,在jquery 中
$(".sub").click(function(){
var subClicked = $(this).attr('id');
$(".stream").hide();
$("#stream-" + subClicked.substring(0,1)).toggle();
});
要定期从服务器获取更新,可以使用AJAX,比如
function load_subjects(){
$.ajax({
url: "http://www.example.com/loader",
cache: false,
success: function(html){
$("#items").html(html);
}
});
}
setInterval(load_subjects, 240000);
I取决于需要加载多少数据。这确实是个人的选择,如果只有几条记录,那么你可以在页面加载时将它们加载到一个数组中,对于较大的数据集,我会使用ajax。像这样的东西可以将html加载到您的#显示区域中
$("#Main_stream_arts").change(function(){
$.ajax({
type: "POST",
url: "some.php",
dataType: "html",
data: { id: $(this).val()}
}).done(function(html) {
$("#display").html(html);
});
});
您还可以将dataType更改为json,并从PHP 输出一个json编码的字符串
或者更短的版本-取决于你想要多少控制:
$("#Main_stream_arts").change(function(){
$('#display').load('some.php?id='+$(this).val());
});
您可以创建这样的HTML结构,可以为每个流复制它。如果您的HTML中有多个流,这将非常有用。
<div class="container">
<div class="header">
<input type="checkbox" value="Electronics" id="electronics" />
<label for="electronics">Electronics</label>
</div>
</div>
然后,假设数据库中的数据是这样的,
{
"Electronics": [
"VLSI",
"Tele Communication",
"Digital Circuits",
"Analog Communication"
],
"Medicine": [
"MBBS",
"MD",
"General Surgeon",
"Dental"
],
"Computers": [
"fuzzy logic",
"DataStructures",
"JavaScript"
]
}
您可以通过json["Electronics"]
获得值——这就是我们模拟ajax
调用的方式。那么您的change
事件将是这样的。
$(".header [type=checkbox]").change(function () {
//remove all the older values - not necessary
$(".content").slideToggle(500, function () {
e.preventDefault();
$(this).remove();
});
//check if youre checking or unchecking
if (this.checked) {
//choosing header
var $header = $(this).closest(".header");
//building container element with ul for subjects in stream
var $content = $("<div/>", {
"class": "content"
}).append("<ul></ul");
var value = this.value;
//simulate ajax call -
var json = res[value];
//ajax here. result is json
//ajax success start - starting here , you could put this in the success function of ajax
//construct the lis - u could do it in any way
var $li = $.map(json, function (val, i) {
return "<li>" + val + "</li>";
});
//add the li to the uls
$content.find("ul").append($li);
//insert the content after specific header
$content.insertAfter($header).promise().done(function () {
//wait for the append to happen, else you wont get the animation
//open up the content needed
$content.slideToggle(500);
});
//ajax success end
}
});
基本上,我们添加了一个元素,该元素在头部旁边的流中动态地包含主题。因此,如果您的HTML中有多个流,这将有所帮助。因此生成的HTML将如下所示:
<div class="container">
<div class="header">
<input type="checkbox" value="Electronics" id="electronics" />
<label for="electronics">Electronics</label>
</div>
<div class="content">
<ul>
<li>Fuzzy Logic</li>
<!--more li's like this-->
</ul>
</div>
</div>
演示:http://jsfiddle.net/hungerpain/Uyugf/