Question

如果我点击下一步按钮第四章显示，而不是第二章或第三章，然后是四章。

任何人都可以帮助我吗？我没有在互联网上找到解决方案，我试了好几天。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div>

  <div class="book">
    <p>1.This is chapter one</p>

    <button>Next</button>
  </div>


</div>

if(count($valid_files > 0)){
    $zip = new ZipArchive();
    $zip_name = "pixels.zip";
    if($zip->open($zip_name, ZIPARCHIVE::CREATE)!==TRUE){
        $error .= "* Sorry ZIP creation failed at this time";
    }

    foreach($valid_files as $file){
        $zip->addFile($file);
    }

    $zip->close();
    if(file_exists($zip_name)){
        // force to download the zip
        header("Pragma: public");
        header("Expires: 0");
        header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
        header("Cache-Control: private",false);
        header('Content-type: application/zip');
        header('Content-Disposition: attachment; filename="'.$zip_name.'"');
        ob_clean();
        flush();
        readfile($zip_name);
     //remove zip file from temp path
        unlink($zip_name);
    }

} else {
    echo "No valid files to zip";
    exit;
}

Answer 1

您需要在变量中存储要显示的内容。

$(document).ready(function(){
    // array of contents
    var contents = [
        '2.This is chapter two<br /><br />',
        '3.This is chapter three<br /><br />',
        '4.This is chapter four<br /><br />'
    ];

    $("button").click(function(){
      	var p = $('p');
        var index = parseInt(p.data('value'));
          
        // write down a new content
        p.html(contents[index]);

        // increase an index for the next click
        p.data('value', index + 1)
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="book">
    <p data-value="0">1.This is chapter one</p>	
    <button>Next</button>
</div>

Answer 2

问题是每次引用时都会覆盖$("p").html()。它确实更改为chapter 2，但随后更改为chapter 3和chapter 4，以至于您没有注意到它。

为了解决这个问题，我建议你做的是定义一个新变量来控制页面。单击该按钮，增加此变量，并根据变量的内容，使用相关内容更新.html()。

这可以在以下内容中看到：

＆＃13;

$(document).ready(function() {

  // Set up a variable to control the pages
  var page = 1;
  
  $("button").click(function() {
  
    // Increase the page
    page++;
    
    // Show the relevant content
    if (page === 2) {
      $("p").html('2. This is chapter two<br />');
    }
    if (page === 3) {
      $("p").html('3. This is chapter three<br />');
    }
    if (page === 4) {
      $("p").html('4. This is chapter four<br />');
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div>
  <div class="book">
    <p>1. This is chapter one</p>
    <button>Next</button>
  </div>
</div>

＆＃13;

希望这有帮助！：）

只有最后一个元素在jQuery中按顺序显示

2 个答案: