Question

我正在制作一个表，我必须创建一些能够为每一行更改数据库中的值的东西。问题是我现在的情况只影响表格中的tr而不影响其他tr。

我正在使用Flight（MVC），这是我的代码：观点：

<tbody>
<?php foreach($this->objarrAll as $key => $value){ ?>
<tr>
    <td><?= $value['category']; ?></td>
    <td><?= $value['user_send']; ?></td>
    <td><?= $value['points']; ?></td>
    <td><a href="javascript:void(0)" data-toggle="modal"
           data-target="#modal-view-<?= $value['id']; ?>">Bekijken</button></td>
    <div id="modal-view-<?= $value['id']; ?>" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Inzending van <?= $value['user_send']; ?></h4>
                </div>
                <div class="modal-body">
                    <p><img width="868px"
                            src="#">
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Sluiten</button>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="uid" value="<?= $value['user_send']; ?>"/>
    <input type="hidden" id="points" value="<?= $value['points']; ?>"/>
    <input type="hidden" id="row_id" value="<?= $value['id']; ?>"/>
    <td><a class="submitPoints" href="javascript:void(0)">Geef punten</a></td>
</tr>
<?php } ?>
</tbody>

Javascript / AJAX代码：

$(".submitPoints").on("click", function () {

    var uid = $('#uid').val();
    var points = $('#points').val();
    var row_id = $('#row_id').val();

    var data = {
        uid: uid,
        points: points,
        row_id: row_id
    };

    $.ajax({
        type: "POST",
        url: "/update/user/points",
        async: true,
        data: data,
        success: function (data) {
            console.log("De " + points + " punten zijn toegekend aan " + uid + "");
            var err = jQuery.parseJSON(data);
            sendAlert.createAlert(err.return, err.type);
            $("#check-view").load("/admin/table/check/all", function () {
            });
        }
    });


});

模型和控制器工作正常，因为正在执行SQL查询。

Answer 1

我确定点击处理程序正在处理所有元素，这就是问题所在：

var express = require('express');
var app = express();

app.get('/', ...app goes here... );

app.listen(3000);

192.168.16.104:8080属性必须是唯一的，当您以这种方式引用它们时，它将返回在DOM中找到的第一个属性。您可以尝试更改为：

var uid = $('#uid').val();
var points = $('#points').val();
var row_id = $('#row_id').val();

但最好切换到id而不是var uid = $(this).find('#uid').val(); var points = $(this).find('#points').val(); var row_id = $(this).find('#row_id').val();

class

Answer 2

首先将您的ID更改为类

<input type="hidden" class="uid" value="<?= $value['user_send']; ?>"/>
<input type="hidden" class="points" value="<?= $value['points']; ?>"/>
<input type="hidden" class="row_id" value="<?= $value['id']; ?>"/>

第二次在你的tr上放了一个课

<tr class="row">

然后将绑定更改为上下文查找。

$(".submitPoints").on("click", function (e) {
    var $row = $(e.target).closest('.row');
    var uid = $row.find('.uid').val();
    var points = $row.find('.points').val();
    var row_id = $row.find('.row_id').val();

可选地，您可以使用数据元素，并且一起忘记隐藏字段。

<td><a class="submitPoints" href="javascript:void(0)" data-uid="<?= $value['user_send']; ?>" data-points="<?= $value['points']; ?>" data-rowid="<?= $value['id']; ?>">Geef punten</a></td>

在这种情况下，你的事件处理程序就是......

$(".submitPoints").on("click", function (e) {
    var $submit = $(e.target);
    var uid = $submit.data('uid');
    var points = $submit.data('points');
    var row_id = $submit.data('rowid');

Answer 3

<input type="hidden" id="uid_<?php echo $value['id']; ?>" value="<?= $value['user_send']; ?>"/>
<input type="hidden" id="points_<?php echo $value['id']; ?>" value="<?= $value['points']; ?>"/>
<input type="hidden" id="row_id_<?php echo $value['id']; ?>" value="<?= $value['id']; ?>"/>
<td><a class="submitPoints" href="ajax_call('uid_<?php echo $value['id']; ?>','points_<?php echo $value['id']; ?>','row_id_<?php echo $value['id']; ?>')">Geef punten</a></td>


<script>
function ajax_call(id_1,id_2,id_3)
{
var uid = $('#'+id_1).val();
    var points = $('#'+id_2).val();
    var row_id = $('#'+id_3).val();

    var data = {
        uid: uid,
        points: points,
        row_id: row_id
    };

    $.ajax({
        type: "POST",
        url: "/update/user/points",
        async: true,
        data: data,
        success: function (data) {
            console.log("De " + points + " punten zijn toegekend aan " + uid + "");
            var err = jQuery.parseJSON(data);
            sendAlert.createAlert(err.return, err.type);
            $("#check-view").load("/admin/table/check/all", function () {
            });
        }
    });
}
</script>

JQuery Click处理程序仅适用于第一项

3 个答案: