0

我有一个主要科目流的列表。假设它们是艺术、科学、商业。每个主蒸汽都有几个主题。例如科学，科目是数学，生物科学等。

当用户选择主流时，我想显示所选主流的相关主题。我使用 jquery 面板。基本上，当检查流时，相关主题 div 将被切换。

我得到主流和主题来自数据库。它们可以是变化的（动态的）。那么如何处理呢？

我使用了以下代码。但这不是动态的。

$("#Science").change(function(){
    $("#Mathas").slideToggle("fast");
});
$("#Bio_cience").change(function(){
    $("#b").slideToggle("fast");

});
$("#Pure_Maths").change(function(){
    $("#cc").slideToggle("fast");

});

我想让上面的脚本动态化。如何进行？

4

5 回答 5

2

您需要在您的复选框和 div 之间有一些共同点，并且您可能不需要再次访问服务器（通过 ajax）来执行此操作。而是在使用 PHP 生成页面时添加一个属性，然后使用 jQuery data()方法来帮助建立关联。例如：

<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>
于 2013-07-07T10:59:16.613 回答
1

我取决于您需要加载多少数据。这真的是个人选择，如果只有几条记录，那么您可以在页面加载时将它们加载到数组中，对于更大的数据集，我会使用 ajax。像这样的东西可以将html加载到你的#display区域

$("#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());
});
于 2013-07-07T10:50:25.560 回答
1

您的 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();
});
于 2013-07-07T10:51:51.953 回答
1

要定期从服务器获取更新，您可以使用 AJAX，如下所示：

function load_subjects(){
    $.ajax({
        url: "http://www.example.com/loader",
        cache: false,
        success: function(html){
            $("#items").html(html);
        }
    });
}
setInterval(load_subjects, 240000);
于 2013-07-07T10:52:16.607 回答
1

您可以创建一个这样的 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/

于 2013-07-07T11:20:33.507 回答