Question

我一直在尝试使用jQuery在for循环中创建动态循环。出于某种原因，单击链接在新窗口中打开该页面而不是向下滑动。

<script type="text/javascript">
$('a.moreDetails').click(function() {
$(this).parent().next().toggle('fast');
});
</script>

while ($row = mysql_fetch_array($res))
{
    echo '<tr onMouseOver="addHighlight(this);" onMouseOut="removeHighlight(this);" onclick="setHighlighted(this);">
              <td colspan="11"> <a href="includes/js/ajax_details_adres.php?id='.$row['id'].'" class="moreDetails">(details)</a><div class="details" id="details'.$row['id'].'">More details</div> </td>
          </tr>';
}

Answer 1

如果您希望点击链接时将includes/js/ajax_details_adres.php?id='.$row['id'].的内容加载到div中，请尝试以下操作：

<script type="text/javascript">
$(document).ready(function() {
    $('a.moreDetails').click(function() {
       var rowID = this.id;
       $(this).siblings(".details").load("includes/js/ajax_details_adres.php?id="+rowID);
       $(this).parent().next().toggle('fast');
    });
});
</script>

while ($row = mysql_fetch_array($res))
{
    echo '<tr onMouseOver="addHighlight(this);" onMouseOut="removeHighlight(this);" onclick="setHighlighted(this);">
              <td colspan="11"> <a href="#" class="moreDetails" id="'.$row['id'].'">(details)</a><div class="details" id="details'.$row['id'].'">More details</div> </td>
          </tr>';
}

您想要点击的内容是获取您设置为链接目标的网址的内容并将其加载到当前页面，对吗？因此，您需要使用ajax将内容加载到现有页面中。这是通过load完成的。上面的代码可能无法准确捕获您想要做的事情，但它应该让您开始。

Answer 2

$('a.moreDetails').click(function(ev) {
    $(this).parent().next().toggle('fast');
    ev.preventDefault();
});

preventDefault会阻止a打开其href。所以它只执行javascript点击处理程序。

滑动动态jQuery

2 个答案: