javascript - (JavaScript+PHP) 在没有 40 个单独事件的情况下，我如何告诉 40 个按钮每个应用于它们所在的表格行？

Question

假设我有一个很大的产品表。每行都有产品名称、价格和“回扣？”复选框。每个产品都有两个与之关联的值:fullPrice 和 rebatePrice。如果选中了返利复选框，则显示返利价格；否则，显示全价。

使用 PHP，我可以通过为每个产品创建一个类、发出数据库查询并遍历结果来生成此表，每行创建一个实例，就像这样。

// Get a MySQL resource with all of my available products.
$db = new mysqli('localhost','alibaba','opensesame','myFictionalStore');
$results = $db->query("SELECT * from productsForSale");

// Define a class that takes "product name", "price", and "rebate price" parameters, and builds a table row.
class item {
    function __construct($product,$price,$rebatePrice) {
        echo "
            <tr>
            <td>{$product}</td>
            <td>{$price}</td>
            <td class="rebate">{$rebatePrice}</td>
            <td><input type=\"checkbox\" /></td>
            </tr>
        ";
    }
}

// Instantiate that class so that every row in the result becomes a row in a HTML table.
while ($row = mysqli_fetch_assoc($results)) {
    new item($row['product'],$row['price'],$row['rebatePrice']);
}

这可以很好地构建我的表格。不过，我确实有一个问题，我花了周日晚上的时间来解决这个问题。

我希望每个表格行中的复选框在全价和折扣价之间切换。我应该怎么做？我目前正在尝试使用 JS for 循环构建一个包含所有复选框的数组、一个包含所有返利单元格的数组，然后在单击框 [i]、console.log 时说 回扣单元格 [i]，只是为了确保我捕获了正确的东西......但这从来没有奏效，我无法想象为什么......

Answer 1

就这样创造

 $db = new mysqli('localhost','alibaba','opensesame','myFictionalStore');
    $results = $db->query("SELECT * from productsForSale");

    // Define a class that takes "product name", "price", and "rebate price" parameters, and builds a table row.
    class item {
        function __construct($product,$price,$rebatePrice) {
            echo "
                <tr>
                <td>{$product}</td>

                <td><span class="price">{$price}</span><span class="rebate">{$rebatePrice}</span></td>
                <td><input class="showPrice" type=\"checkbox\" /></td>
                </tr>
            ";
        }
    }

    // Instantiate that class so that every row in the result becomes a row in a HTML table.
    while ($row = mysqli_fetch_assoc($results)) {
        new item($row['product'],$row['price'],$row['rebatePrice']);
    }

jquery 是

$('.showPrice').change(function ()
{

    if ($(this).is(":checked")) {

        $(this).parent().prev().find('span').hide();
        $(this).parent().prev().find('span.rebate').show();
    } 
    else
    {
        $(this).parent().prev().find('span').hide();
        $(this).parent().prev().find('span.price').show();
    }
});

如果您不想在初始加载时显示回扣价格

在 css 中你可以隐藏它。

.rebate
{
   display:none;
}