Question

我有一个关于jquery的问题点击以使用id加载url。

我正在尝试当用户点击class="open" id="1"然后ajax网址只会打开id="openpage1"但是代码显示在所有id="openpageXX"我在做错了什么人都可以帮助我关注？

$.base_url = 'http://localhost/';
$(".open").on('click', function() {
    var ID = $(this).attr("id");
    $("#openpage" + ID).slideToggle('fast');
    var URL = $.base_url + 'page.php';
    $.ajax({
      type: "POST",
      url: URL,
      cache: false,
      success: function(html) {
        if (html) {
           $(".page_area").html(html);
        }
      }
    });

    return false;
  });

HTML

<!--First Post Started-->
<div class="post_area" id="1">
  <div class="open" id="1">Click for 1</div>
  <div class="opened_page" id="openpage1">
    When user click (class=open id 1 then ajax page will need to open just here)
  </div>
</div>
<!--First Post finished-->

<!--Second post started-->
<div class="post_area" id="2">
<div class="open" id="2">Click for 2</div>
  <div class="opened_page" id="openpage2">
    When user click (class=open id 2 then ajax page will need to open just here)
  </div>
</div>
<!--Second Post finished-->

Answer 1

我看到3个问题

我强烈建议使用唯一的非数字ID - 但我的代码不再需要ID - 我使用datza-id来保存链接的信息
您需要找到最近的opens_page - 您尝试使用不在HTML
我会缓存要在成功中使用的点击对象

<div class="post_area">
  <div class="open" data-id="1">Click to open</div>
  <div class="opened_page">
    When user click (class=open id 1 then ajax page will need to open just here)
  </div>
</div>

$(function() {
  $(".open").on('click', function(e) {
     e.preventDefault(); // in chase you change to a link or button
     var $this = $(this),
           URL = $.base_url + 'page.php?page='+$this.data("id"),
         $page = $this.next("opened_page"); // sibling
     $.ajax({
       type: "POST",
       url: URL,
       cache: false,
       success: function(html) {
         if (html) {
            $page.html(html).slideToggle('fast');; // sibling
         }
       }
    });
  });
});

Jquery Ajax单击div中的show page

1 个答案: