Question

我已将以下增量计数器放在一起并让它在页面上运行：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Click Counter</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript src='inc/js/jquery-1.11.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript">
$(function(){
$('body').on('click', 'button', function(event){
    event.preventDefault();
    var currentNumber = $('#currentNumber').text();
    $.ajax({
        method: 'POST',
        url: 'increase_counter.php',
        data: {currentNumber : currentNumber}
    })
    .done(function(newNumber){
        $('#currentNumber').text(newNumber);
    });
});
});
</script>
</head>
<body>
<div id="currentNumber">[xyz-ips snippet="Counter"]</div>
<button type="button">Click To Add One</button>
</body>
</html>

与我服务器上的以下php文件配合使用：

<?php
  $counter_name = 'emailCounter.txt';
  if (!file_exists($counter_name)) {
  $f = fopen($counter_name, "w");
  fwrite($f,"0");
  fclose($f);
 }

  $counterVal = file_get_contents($counter_name);
  $counterVal++;

  $f = fopen($counter_name,"w");
  fwrite($f, $counterVal);
  fclose($f);

  echo $counterVal;
?>

它为我提供了一个增量计数器，每当我点击一个按钮+1时，我的服务器上的.txt文档中的存储值就会增加，并且工作正常。但是，我希望在同一页面上有多个计数器。如何放置一个独特的第二个按钮＆amp;反击？（他们会算一个单独的事情）。我创建了第二个网址＆quot; increase_counter2.php＆＃39;这将执行第二个.txt文件的生成并执行计算...只是不知道如何设置页面上的按钮。

编辑 - 解决方案

对于任何在将来看到这一点的人

HTML：

<html>
<head>
<meta charset="utf-8">
<title>Click Counter</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript src='inc/js/jquery-1.11.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript">
$(function(){
$('body').on('click', 'button', function(event){
    event.preventDefault();
    var currentNumber = $('#currentNumber').text();
    $.ajax({
        method: 'POST',
        url: 'increase_counter.php',
        data: {
counterId: event.target.id, // you get the button through the click
value: currentNumber
}
    })
    .done(function(newNumber){
        $('#currentNumber').text(newNumber);
    });
});
});
</script>
</head>
<body>
<div id="currentNumber">[xyz-ips snippet="Counter2"]</div>
<button type="button" id="Counter1">Sheets</button>
<button type="button" id="Counter2">Pillow</button>
<button type="button" id="Counter3">King Sheet</button>
</body>
</html>

PHP：

if ( isset($_POST['counterId']) ) {
$counterId = $_POST['counterId'];

if ( !file_exists($countersFile) ) {
    $counters = [];
} else {
    $counters = json_decode(file_get_contents($countersFile), TRUE);
    if ( is_null($counters) ) $counters = [];
}

if ( array_key_exists($counterId, $counters) ) {
    $counters[$counterId]++;
} else {
    $counters[$counterId] = 1;
}

file_put_contents($countersFile,
    json_encode($counters, JSON_PRETTY_PRINT),
    LOCK_EX);

echo $counters[$counterId];
}
?>

Answer 1

我想如果你喜欢同一页面的第二个计数器尝试

<script type="text/javascript">
$(function(){
  $('body').on('click', '.button', function(event){
    addnumber(1);
  });
  $('body').on('click', '.button1', function(event){
    addnumber(2);
  });
});
function addnumber(nom){
    var currentNumber = $('#currentNumber').text();
    $.ajax({
        method: 'POST',
        url: 'increase_counter.php',
        data: {currentNumber : currentNumber,addno:nom}
    })
    .done(function(newNumber){
        $('#currentNumber').text(newNumber);
    });
}
</script>
</head>
<body>
<div id="currentNumber">[xyz-ips snippet="Counter"]</div>
<button type="button" class="button">Click To Add One</button>
<button type="button" class="button1">Click To Add Two</button>

increase_counter.php

<?php
  $counter_name = 'emailCounter.txt';
  if (!file_exists($counter_name)) {
  $f = fopen($counter_name, "w");
  fwrite($f,"0");
  fclose($f);
 }

  $counterVal = file_get_contents($counter_name);
  $counterVal=$counterVal+$_POST['addno'];

  $f = fopen($counter_name,"w");
  fwrite($f, $counterVal);
  fclose($f);

  echo $counterVal;
?>

如果您喜欢不同的计数器页面，例如emailCounter1.txt，emailCounter2.txt等将increase_counter.php改为

<?php
  $counter_name1 = 'emailCounter1.txt';
  $counter_name2 = 'emailCounter2.txt';

  $no=$_POST['addno'];

  if (!file_exists($counter_name.$no)) {
  $f = fopen($counter_name.$no, "w");
  fwrite($f,"0");
  fclose($f);
 }

  $counterVal = file_get_contents($counter_name.$no);
  $counterVal=$counterVal+$_POST['addno'];

  $f = fopen($counter_name.$no,"w");
  fwrite($f, $counterVal);
  fclose($f);

  echo $counterVal;
?>

Answer 2

您可以更改发送数据的表示形式，并在文件中保存它的JSON表示形式。您必须将ID添加到按钮，以便您可以唯一地识别计数器。

data: {
    counterId: event.target.id, // you get the button through the click
    value: currentNumber
}

$counters = json_decode($json);
if (isset($_POST['counterId'])) {
    $counterId = filter_input(INPUT_POST, 'counterId', FILTER_SANITIZE_STRING);
    $value = filter_input(INPUT_POST, 'value', FILTER_VALIDATE_INT);
    $counters[$counterId] = $value;
}
$json = json_encode($counters);

保存并从文件中读取JSON字符串。由于ids不同，因此值保持跟踪。您也不需要编写另一个php文件，例如，如果您想添加第三个按钮。（！）

使多个增量按钮工作

编辑 - 解决方案

2 个答案: