Question

您好我有一个动态生成的php mysql生成的项目列表。

在内容部分下方，基本上有一个链接＆＃34; Load Related＆＃34;链接在这种情况下，内容是一堆缩略图。我不想在页面加载时加载列表的拇指，而是我想用Ajax使用JQuery加载它们。

下面的代码加载通过单击锚点触发的数据＆＃34; a.related＆＃34;一个静态命名的div例如＆＃34; div＃pimgs＆＃34;但它会填充所有名为#pimgs

的div

$('a.related').bind('click', function(e) {           
    var url = $(this).attr('href');
    $('div#pimgs').load(url);
    e.preventDefault();
});

<a class="related32" href="external-content.php?id=32"></a> 
<div id="pimgs32"></div>

我想将数据驱动的内容加载到dynimacilly命名的div中，例如＆＃34; div＃pimgs123＆＃34;当你点击一个名为say＆＃34; a.related123＆＃34;或者直接在点击锚点下方的JQuery生成的容器中。

有人可以帮忙吗？希望我能有所作为......

Answer 1

你可以从这开始吗？

$( 'a.related' ).bind( 'click', function( e ) {  
    var url = $( this ).attr( 'href' );
    var id = $( this ).attr( 'data-id' );
    $( 'div#pimgs' + id ).load( url );
    e.preventDefault();
} );

在动态生成的<a>中，将数字放入data-id属性（ref）。

所以也许：

 <a href="foo" class="related" data-id="<?php echo $id; ?>">bar</a>
 <div id="pigms<?php echo $id; ?>"></div>

Answer 2

demo

不要使用重复的ID

。

$('a[class^="related"]').bind('click', function(e) {
    e.preventDefault();
    var id = $(this).attr('class').split(' ').filter(function(v) {
        return v.indexOf('related') > -1;
    })[0];           
    var url = $(this).attr('href');
    $('#' + id).load(url);
});

JQuery将动态url加载到动态项目列表中

2 个答案: