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

このような 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 に答える
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 に答える