Question

目标：
单击“下一张幻灯片”按钮可使用其他php文件中的新内容刷新/替换<div>内容。每张幻灯片都是自己的php文件。这是我正在建设的在线课程。每次单击该按钮时，<div>现有内容将被系列中下一张幻灯片（php文件）中的新内容替换。我还想构建一个后退按钮来转到上一张幻灯片，但我还没有达到这一点。

问题：
我目前正在尝试使用jquery / ajax。该按钮在前两张幻灯片中有效（使用新的幻灯片内容刷新<div>），但在第三张幻灯片上不起作用。我把按钮放在每张幻灯片上（这样更喜欢）。这可能是问题之一。我认为另一个问题可能与页面变量的文件路径有关。我也想知道问题是否与主页仅包含Div中的其他文件这一事实有关。像这样：

    <div id="header">
      <?php include 'pf_header.php'; ?>
    </div>
    <div id="menu">
      <?php include 'pf_menu.php'; ?>
    </div>
    <div id="content">
      <?php include 'pf_welcome.php'; ?>
    </div>
    <div id="footer">
      <?php include 'pf_footer.php'; ?>        
    </div>

我的所有代码如下：

的script.js

$(document).ready(function() {
    $(".slide").on("click", function(e){
        $(".content").load($(this).attr("page"));
    });
});

幻灯片1（按钮有效）

 <div class="content">
  <div id="main">
    <input type="button" value="NEXT" id="nextbtn" class="slide" page="pf_instructions.php">
  </div>
  <div id="sidebar">            
    <div id="aside1">
      <iframe src="https://www.youtube.com/embed/NAeha727ZWI"></iframe>
    </div>
    <div id="aside2">
    </div>
  </div>
 </div>

幻灯片2（按钮有效）

 <div class="content">
  <div id="main">
    <p>INSTRUCTIONS</p>  
    <p>INSTRUCTIONS</p>  
    <input type="button" value="NEXT" id="nextbtn" class="slide" page="basics/pf_l1_introduction.php">
  </div>
  <div id="sidebar">            
    <div id="aside1">
      <iframe src="https://www.youtube.com/embed/NAeha727ZWI"></iframe>
    </div>
    <div id="aside2">
    </div>
  </div>
 </div>

幻灯片3 （按钮不起作用）

 <div class="content">
  <div id="main">
    <p></p>
    <input type="button" value="NEXT" id="nextbtn" class="slide" page="basics/pf_l1_quiz.php">
  </div>
  <div id="sidebar">       
    <div id="aside1">
      <iframe src="https://www.youtube.com/embed/NAeha727ZWI"></iframe>
    </div>
    <div id="aside2">
    </div>
   </div>
  </div>

持续刷新DIV内容的按钮停止工作

0 个答案: