Question

我是jQuery的新手，我想知道是否可以将这两个功能结合起来。

如您所见，第一个函数用于加载json数据以触发点击。

第二个功能用于切换列表项的视图。

你能帮助我，并告诉我结合这些功能的好方法吗？

当加载json文件时，它将创建列表元素（li），并且切换将能够切换这些列表元素（li）。

重要提示：实际上，我的代码不起作用（切换功能无法正常工作）。

以下是第一函数的代码：

$(document).ready(function() {
    // ----------------------
    // JSON INFOS
    // ----------------------

    $(".color-list.one li:first-child").on('click', function() {
        $.getJSON("result.json", function(data) {
        //Handle my response

        $('ul.elements-list').html(
            '<li class="elements-item"><span class="tog">' + data.name + '</span><div class="togcont hidden">' + data.info + data.size + '</div></li>');

            //alert(data);
        });
    });


});

第二功能的代码：

$(document).ready(function() {
    // ----------------------
    // TOGGLE BULLZ
    // ----------------------
    $(".tog").click(function(){
        var obj = $(this).next();
            if($(obj).hasClass("hidden")){
                $(obj).removeClass("hidden").slideDown();
                $(this).addClass("bounce");
            } else {
                $(obj).addClass("hidden").slideUp();
                $(this).removeClass("bounce");
        }
    });



});

Answer 1

当您使用$(".tog").click()时，它仅绑定到当时与".tog"选择器匹配的任何元素，因此不会对稍后动态添加的元素起作用。您可以使用.on()的委托语法，如下所示：

$('ul.elements-list').on("click", ".tog", function(){ ...

...它会将点击处理程序绑定到您的列表，但只有当该列表中的某个元素与当时第二个参数中的".tog"选择器匹配时才执行您的函数点击。在处理程序this内将设置为被点击的".tog"元素。

此外，您可以将所有代码放在一个文档就绪处理程序中，假设所有代码都在同一个文件中。

此外，您的obj变量是一个jQuery对象，因此您可以直接在obj.hasClass()上调用jQuery方法，而不是将其$()再次包装为$(obj).hasClass()。< / p>

所以试试这个：

$(document).ready(function() {

    $(".color-list.one li:first-child").on('click', function() {
        $.getJSON("result.json", function(data) {
            //Handle my response
            $('ul.elements-list').html(
               '<li class="elements-item"><span class="tog">' + data.name + '</span><div class="togcont hidden">' + data.info + data.size + '</div></li>');
        });
    });

    $('ul.elements-list').on("click", ".tog", function(){
        var obj = $(this).next();
        if(obj.hasClass("hidden")){
            obj.removeClass("hidden").slideDown();
            $(this).addClass("bounce");
        } else {
            obj.addClass("hidden").slideUp();
            $(this).removeClass("bounce");
        }
    });

});

结合两个jQuery-json函数。正确的方法

1 个答案: