Question

我正在使用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（）功能会很棒！）

我该怎么做？！

非常感谢！

Answer 1

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

<强> 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();
});

Answer 2

您正在将ajaxurl元素打印为id ="id<?php print $id; ?>"，您打算改为id ="<?php print $id; ?>"吗？

Answer 3

有些事情似乎输入错误，否则您可能需要仔细检查以下内容：

<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'));

如何将变量传递给jquery加载选择器？

3 个答案: