2015-12-21 67 views
-1

我有一堆动态创建的锚标签。我基本上想调用一个函数,并使用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>标签。

+0

这将有助于看到您的HTML,但它听起来像你有几个问题。首先是'#a'和'#slideown'元素将被复制,这是无效的,因为'id'属性在文档中必须是唯一的。改为使用班级。其次,你需要遍历'this'的引用中的DOM来找到相邻的'.slidedown'元素并在其上调用'slideto()'。 –

+0

@RoryMcCrossan请检查,更新 – fscore

+0

谢谢 - 我给你添加了一个答案 –

回答

0

不知道这会解决这个问题,但$('slidedown')是不是一个有效的选择,应该是$('#slidedown'),因为你有div标识符为slidedown<div id="slidedown">

0

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

$.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(); 
}); 
+0

我尝试了上面的代码更改,但仍然无效 – fscore