Question

我希望当我们点击Ajax 1时，ajax1的内容会发生变化，但Ajax 2将保持相同，反之亦然，我想用jquery来帮助我这样做

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#pas").click(function(){
  $.ajax({url:"001.php?q=1 & l=111", success:function(result){
    $("#pas").html(result);
  }});
});});
</script>
</head>
<body>
<div id="pas"><h2>AJAX 1</h2></div>
<div id="pas"><h2> AJAX2 </h2></div>
</body>
</html>

Answer 1

两个元素不能具有相同的id。您应该更改为使用类。

<div class="pas"><h2>AJAX 1</h2></div>
<div class="pas"><h2> AJAX2 </h2></div>

完成后，您可以使用this定位正确的项目。

$(document).ready(function(){
    $(".pas").click(function(){
        var $this = $(this);    // "this" is the clicked element

        $.ajax({url:"001.php?q=1 & l=111", success:function(result){
            $this.html(result);
        }});
    });
});

Answer 2

你必须区分div的id：给他们两个不同的id（即pas1和pas2）和同一个类'pas'，然后在div.pas上激活动作

Answer 3

不要使用重复的ID，而是使用class。使用对单击对象的引用来更新您的内容。这是您修改后的代码：

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function(){
  var _this = this;
  $.ajax({url:"001.php?q=1 & l=111", success:function(result){
    $(_this).html(result);
  }});
});});
</script>
</head>
<body>
<div><h2>AJAX 1</h2></div>
<div><h2> AJAX2 </h2></div>
</body>
</html>

点击特定div时获取数据的jquery，我希望当我们点击Ajax 1时

3 个答案: