jQuery Ajax單擊div中的顯示頁面

Question

我有一個關於jquery點擊以使用id在div中加載url的問題。

我正在嘗試當用戶單擊class="open" id="1" ，ajax URL將僅打開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個問題

1. 我強烈建議使用唯一的非數字ID-但我的代碼不再需要ID-我使用datza-id來保存鏈接的信息
2. 您需要找到最近的open_page-您嘗試不在HTML中的page_area
3. 我將緩存單擊的對象以成功使用

像這樣：

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