动态处理jquery事件

Question

我有一个主要主题的列表。让我们假设它们是艺术，科学，商业。每条主干道都有几个主题。比如理科、数学、生物科学等。

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

我得到的主流和主题都来自数据库。它们可以是变化的(动态)。那么如何处理这件事呢？

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

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

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

});

我想让上面的脚本动态化。如何继续？

Answer 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();
});

Answer 2

您的checkbox和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>

Answer 3

这取决于你需要加载多少数据。这真的是个人选择，如果只有几条记录，那么你可以在页面加载时将它们加载到一个数组中，对于更大的数据集，我会使用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());
});