Question

我正在尝试根据单击的按钮更改变量，然后使用AJAX更新div，以防止页面刷新。

的index.php

    <div id="value1"></div>

    <div id="main-content">
      <?php include 'page1.php'; ?>
    </div>

page1.php中

<script src="click.js"></script>

      <button id="button1">Load Page 2</button>

使page2.php

<script src="click.js"></script>

      <button id="button2">Load Page 3</button>

click.js

var valueAdd = 15;
document.getElementById("value1").innerHTML = valueAdd;

$(document).ready(function(){
    $('#button1').click(function(){
        valueAdd ++;
        $('#main-content').load('page2.php').hide().fadeIn('slow');

    $('#button2').click(function(){
        valueAdd ++;
        $('#main-content').load('page3.php').hide().fadeIn('slow');
})

因此，为了遵循逻辑，index.php将在“value1”div中加载page1.php，其值为15。单击“加载页面2”按钮后，page2.php将加载到“main-content”div中，同时将“value1”div中的值增加1。

它没有这样做，我不知道要采取这样做的路线。感谢所有帮助。

感谢。

Answer 1

首先，workoutVal中的valueAdd应该是document.getElementById("value1").innerHTML = workoutVal;吗？

您的valueAdd变量与value1 div的innerHTML之间没有持久链接。当您最初为value1分配innerHTML值时，您只在该特定时间点为其指定值value1。你没有将两者结合在一起，变量中的值的变化会自动传播到div中的变化（但这通常是在许多现代JavaScript框架中完成的，即：AngularJS）。

如果您希望在点击按钮时更新value1 div，则必须在代码中明确执行此操作：

$(document).ready(function(){
    $('#button1').click(function(){
        valueAdd++;
        document.getElementById("value1").innerHTML = valueAdd;
        $('#main-content').load('page2.php').hide().fadeIn('slow');
    });
    $('#button2').click(function(){
        valueAdd++;
        document.getElementById("value1").innerHTML = valueAdd;
        $('#main-content').load('page3.php').hide().fadeIn('slow');
    });
});

Example

更改.click上的变量整数和.load

1 个答案: