Question

我有一堆动态创建的锚标签。我基本上想要调用一个函数，并使用jquery slideDown在该锚标记下显示该执行函数的内容。每个<a>标记id="id"和每个<a>标记都有<div id="slidedown">。

我正在使用jquery.slideto.min.js。

以下代码甚至根本没有下滑。

$(function() {
    $.ajax({
        dataType: 'json'
        url: '/lists',
        success: function (data) {
            if (data != null) {
                var html = '<ul>';
                $.each(data.apis, function (i, item) {
                    html += '<li class="res">';
                    html += '<div class="hed"><h2><a id="id" href="/api/' + item + '.json">' + item + '</a></h2></div><div id="slidedown"></div>';
                    html += '</li>';
                });
                html += '</ul>';
                $('#exDiv').empty();
                $('#exDiv').append(html);
            }
        },
        error: function () {
            alert('Error');
        },
        contentType: 'application/json'
    });

   $(document).on('click','#id', function(e) {

       e.preventDefault();
       var link = this.href;
       $('#slidedown').slideto();
    });
});

点击任意Uncaught TypeError: Cannot read property 'version' of undefined代码后，我在控制台上看到<a>。

Answer 1

不确定这是否可以解决问题，但$('slidedown')不是有效的选择器，应该是$('#slidedown')，因为div标识为slidedown：{{1} }。

Answer 2

您遇到的主要问题是您生成了重复的id属性，这些属性无效。将它们更改为类。然后，您可以遍历click()处理程序中的DOM，以使用.slidedown查找相关的next()元素。试试这个：

$.ajax({
    dataType: 'json'
    url: '/lists',
    success: function (data) {
        if (data != null) {
            var html = '<ul>';
            $.each(data.apis, function (i, item) {
                html += '<li class="res">';
                html += '<div class="hed"><h2><a class="id" href="/api/' + item + '.json">' + item + '</a></h2></div><div class="slidedown"></div>';
                html += '</li>';
            });
            html += '</ul>';
            $('#exDiv').empty().append(html);
        }
    },
    error: function () {
        alert('Error');
    },
    contentType: 'application/json'
});

$(document).on('click','.id', function(e) {
   e.preventDefault();
   var link = this.href; // you can remove this if it's not used.
   $(this).next('.slidedown').slideto();
});

单击标记时向下滑动不会滑动

2 个答案: