使用javascript为多个按钮计算点击次数

Question

此代码仅计算从数据库获取列表中的第一个产品的“点击次数”，但它们如何为剩余产品生成“点击次数”

 <?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = '';
$connect=mysqli_connect("localhost","root","","yii2_advanced");

$query = mysqli_query($connect,"SELECT * FROM product");

$dynamicList ="";
WHILE ($rows = mysqli_fetch_array($query)):


   $idr = $rows['product_id'];
   $product_name = $rows['product_name'];
   $product_amount = $rows['product_amount'];
   $product_type = $rows['product_type'];
    $dynamicList .= '   <script type="text/javascript">
var clicks = 0;
function onClick() {
    clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;
};
function onClick2(){

    if(clicks >0){
        clicks -= 1;
    document.getElementById("clicks").innerHTML = clicks;

}
else if(clicks == 0){

    document.getElementById("clicks").innerHTML = clicks;

}
};
</script>
<table width="100%" border="0" cellspacing="0" cellpadding="6">
    <tr>
      <td width="%" valign="top"><img style="border:#666 1px solid;" src="'. $idr . '.jpg" alt="' . $product_name . '" width="77" height="102" border="1" /></td>
      <td width="83%" valign="top">' . $product_name . '<br />
        Rs.' . $product_amount . '<br />
         <button onClick="onClick2()" type="button"><b>-</b></button>
<p style="display:inline-block;"><a id="clicks">0</a></p>
<button onClick="onClick()"><b>+</b></button>

        </td>
    </tr>
  </table>';
   endwhile;
   ?>

为了更好地说明，我将在下面显示图片：

Answer 1

试试这个;）

＆＃13;

＆＃13;

#include <iostream>
#include <string>
#include <boost/bimap.hpp>

int main() {
  typedef boost::bimap<std::string, std::string> Ipmap;
  typedef Ipmap::value_type NameIpPair;

  Ipmap players;
  players.insert(NameIpPair("a", "1.2.3.4"));
  players.insert(NameIpPair("b", "5.6.7.8"));
  players.insert(NameIpPair("c", "9.10.11.12"));

  std::cout << players.left.at("b") << std::endl;
  std::cout << players.right.at("5.6.7.8") << std::endl;
}

＆＃13;

    var clicks = {0:0, 1:0};

    function onClick(index) {
      clicks[index] += 1;
      console.log(index);
      document.getElementById("clicks" + index).innerHTML = clicks[index];
    }

    function onClick2(index) {

      if (clicks[index] > 0) {
        clicks[index] -= 1;
        document.getElementById("clicks" + index).innerHTML = clicks[index];

      } else if (clicks[index] == 0) {

        document.getElementById("clicks" + index).innerHTML = clicks[index];

      }
    }

＆＃13;

＆＃13;

＆＃13;

针对多个项目更新1

<table width="100%" border="0" cellspacing="0" cellpadding="6">
  <tr>
    <td width="%" valign="top"><img style="border:#666 1px solid;" src="'. $idr . '.jpg" alt="' . $product_name . '" width="77" height="102" border="1" /></td>
    <td width="83%" valign="top">' . $product_name . '
      <br /> Rs.' . $product_amount . '
      <br />
      <button onclick="javascript:onClick2(0)" type="button"><b>-</b></button>
      <p style="display:inline-block;"><a id="clicks0">0</a></p>
      <button onclick="javascript:onClick(0)"><b>+</b></button>

    </td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="6">
  <tr>
    <td width="%" valign="top"><img style="border:#666 1px solid;" src="'. $idr . '.jpg" alt="' . $product_name . '" width="77" height="102" border="1" /></td>
    <td width="83%" valign="top">' . $product_name . '
      <br /> Rs.' . $product_amount . '
      <br />
      <button onClick="onClick2(1);" type="button"><b>-</b></button>
      <p style="display:inline-block;"><a id="clicks1">0</a></p>
      <button onClick="onClick(1);"><b>+</b></button>

    </td>
  </tr>
</table>

Answer 2

使用jQuery修改你的小提琴并清理PHP，如：https://jsfiddle.net/574mL1z1/2/

关键问题是两个：

1. 您尝试在点击两个产品的clicks和+按钮时更新相同的变量（-）。
2. 不知何故，你在调用JS函数的小提琴中使用的代码无效。

我认为你可以尝试更清洁：

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

      <table width="100%" border="0" cellspacing="0" cellpadding="6">
        <tr>
          <td width="%" valign="top"><img style="border:#666 1px solid;" src="'. $idr . '.jpg" alt="' . $product_name . '" width="77" height="102" border="1" /></td>
          <td width="83%" valign="top">' . $product_name . '<br />
            Rs.' . $product_amount . '<br />
             <button class="dec" data-id="id1" type="button"><b>-</b></button>
             <p style="display:inline-block;"><a id="clicks_id1">0</a></p>
             <button type="button" data-id="id1" class="inc"><b>+</b></button>
          </td>
        </tr>
      </table>

      <table width="100%" border="0" cellspacing="0" cellpadding="6">
        <tr>
          <td width="%" valign="top"><img style="border:#666 1px solid;" src="'. $idr . '.jpg" alt="' . $product_name . '" width="77" height="102" border="1" /></td>
          <td width="83%" valign="top">' . $product_name . '<br />
             Rs.' . $product_amount . '<br />
             <button class="dec" data-id="id2" type="button"><b>-</b></button>
             <p style="display:inline-block;"><a id="clicks_id2">0</a></p>
             <button type="button" data-id="id2" class="inc"><b>+</b></button>
          </td>
        </tr>
      </table>

<script type="text/javascript">
$(".inc").on("click", function (){
    var dataId = $(this).attr("data-id");
    var clicks = parseInt($("a#clicks_"+dataId).html());
    clicks++;
    $("a#clicks_"+dataId).html(clicks);
});

$(".dec").on("click", function (){
    var dataId = $(this).attr("data-id");
    var clicks = parseInt($("a#clicks_"+dataId).html());

    if (clicks > 0) {
        clicks--;
    }
    $("a#clicks_"+dataId).html(clicks);
});
</script>