在 .click 上更改变量整数与 .load 耦合

Change variable integer on .click coupled with .load

本文关键字：整数 load 耦合 变量 改变 click      更新时间：2023-09-26

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

索引.php

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

页1.php

<script src="click.js"></script>
      <button id="button1">Load Page 2</button>

页2.php

<script src="click.js"></script>
      <button id="button2">Load Page 3</button>

点击.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 将加载到"主要内容"div 中，同时将"value1"div 中的值增加 1。

它没有这样做，我不知道这样做的途径。感谢所有帮助。

谢谢。

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

您的valueAdd变量和value1div 的内部 HTML 之间没有持久的链接。 最初分配 innerHTML 值 value1 时，您只为它分配该特定时间点的 value1 值。 您没有将两者耦合在一起，其中变量中值的变化将自动传播到div 中的更改（然而，这是许多现代 JavaScript 框架中通常做的事情，即：AngularJS）。

如果您希望在单击按钮时更新value1div，则必须在代码中显式执行此操作：

$(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');
    });
});

例

相关文章：