1

我正在使用 ajax 在 div 内加载页面。当我有一个固定的选择器 div 时，一切正常，例如 -

$('.ajaxurl').click(function(){
    $('.selected-blog').load($(this).attr('href'));
    return false;
});

这里 '.selected-blog' 是一个固定条目。

但是，我在页面上有多个 .ajaxurl 链接，每个链接都有自己的“.selected-blog” div，因此我希望能够根据单击的 .ajaxurl 链接将源加载到不同的 div 中。换句话说，每个 .ajaxurl 链接都需要有一个对应的唯一 .selected-blog-[id] 类，单击链接需要将 [id] 变量传递给函数，以便可以将其附加到选择器。

我尝试为 .ajaxurl 链接提供一个 id 以作为变量传递给 jquery，以便正文代码为 -

<div class="teaser-id<?php print $id; ?>">
  <a class="ajaxurl" id ="id<?php print $id; ?>" href="[pagelink]">Click me</a>  
  stuff here
</div> 
<div class="selected-blog-id<?php print $id; ?>"></div>     

[this above code repeats for each teaser in the list]

jquery代码是-

$('.ajaxurl').click(function(){
     var x = this.id;
     $('.selected-blog-,'+x).load($(this).attr('href'));
     return false;
});

但我无法让它工作，我做错了什么？

（最后 - 如果它对解决方案有影响，这是一个额外的点 - 我想隐藏 teaser-[id] div，所以如果传递的变量也可以用于这个 .hide() 函数会很好！）

我该怎么做呢？！

非常感谢！

4

3 回答 3

1

你不需要让你的 html 如此复杂。您可以保持简单并使用 jquery next()来获取下一个 div 类selected-blog-id以将内容加载到其中。这些方面的东西应该适合你：

HTML：

<div class="teaser-id">
    <a class="ajaxurl" href="[pagelink]">Click me</a>  
    stuff here
</div> 
<div class="selected-blog-id"></div>

Javascript：

$('.ajaxurl').click(function(e) {
    var $parent = $(this).parent();

    // hide the teaser
    $parent.hide();

    // load content into the next div with selected-blog-id
    $parent.next('.selected-blog-id').load(this.href);
    e.preventDefault();
});
于 2012-08-27T12:35:44.630 回答
0

有几件事似乎打错了，否则您可能需要仔细检查以下内容：

<div class="teaser-id-<?php print $id; ?>">
 <a class="ajaxurl" id ="blog-<?php print $id; ?>" href="[pagelink]">Click me</a>  
 <!-- <a class="ajaxurl" id ="id<?php print $id; ?>" href="[pagelink]">Click me</a> -->  
 stuff here
</div> 
<div class="selected-blog-<?php print $id; ?>"></div> 
<!-- <div class="selected-blog-id<?php print $id; ?>"></div> -->   

[this above code repeats for each teaser in the list]

jQuery

$('.ajaxurl').click(function(){
    var x = this.id.replace("blog-", '');
    //$('.selected-blog-,'+x).load($(this).attr('href'));
    $('.selected-blog-' + x).load($(this).attr('href'), function(){
        $(".teaser-id-" + x).hide();
    });
    return false;
});

更新 根据评论更改此...

$('.selected-blog-'+x).load($(this).attr('href'));
于 2012-08-27T12:40:05.843 回答
0

您将ajaxurl元素打印为id ="id<?php print $id; ?>"，您是否打算这样做id ="<?php print $id; ?>"？

于 2012-08-27T12:36:39.277 回答