javascript - 将变量从 jquery 传递到 URL

Question

所以我在将值传递给引导模式时遇到问题。我认为这与不刷新页面有关，希望有人能帮助我。

我正在根据从数据库返回的数据生成一个表，其中最后一列有三个按钮。每个按钮都会打开一个模式窗口，我想在其中检索、更新或删除数据库中的完整条目。

表生成在哪里。每行都是 .clickableRow 类

<?php
foreach ($studentsTable as $row) {
        echo '<tr class="clickableRow" data-id="'. $row['id'] . '">';
            echo '<td class="column-id" scope="row">' . $row['id'] . '</td>';
            echo '<td>' . $row['name'] . '</td>';
            echo '<td>' . $row['email'] . '</td>';
            echo '<td class="column-action">'
                .   "<button type='button' class='btn btn-info btn-sm mr-1' data-toggle='modal' data-target='#modal-detailsStudent'>Ver</button>"
                .   '<button type="button" class="btn btn-info btn-sm mr-1" data-toggle="modal" data-target="#modal-updateStudent">Editar</button>'
                .   '<button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#modal-deleteStudent">Apagar</button>'
            .'</td>';
        echo '</tr>';
}
?>

生成并显示表格后，如果单击该行，我可以使用以下脚本更新 httpquery。

$('.clickableRow').on('click', function() {
    console.log($(this))
    //console.log($(this).attr('data-id'))
    changeUrlParam('id', $(this).attr('data-id'))
})

function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}

function changeUrlParam (param, value) {
    var currentURL = window.location.href+'&';
    var change = new RegExp('('+param+')=(.*)&', 'g');
    var newURL = currentURL.replace(change, '$1='+value+'&');

    if (getURLParameter(param) !== null){
        try {
            window.history.replaceState('', '', newURL.slice(0, - 1) );
        } catch (e) {
            console.log(e);
        }
    } else {
        var currURL = window.location.href;
        if (currURL.indexOf("?") !== -1){
            window.history.replaceState('', '', currentURL.slice(0, - 1) + '&' + param + '=' + value);
        } else {
            window.history.replaceState('', '', currentURL.slice(0, - 1) + '?' + param + '=' + value);
        }
    }
}

但是...在我单击其中一个按钮后，控制台始终显示输出相同的 id。模态跟随

<div class="modal fade" id="modal-detailsStudent" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Nome do Aluno</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
        <div class="modal-body">
            <input type="hidden" name="hiddenValue" id="hiddenValue" value="" />
            <h5> <?php var_dump($_GET['id']); ?> </h5>
        </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Answer 1

这是由于您的点击调用所致，它将始终引用该类的第一个元素。您希望它看起来像这样:

jQuery('.clickableRow').on('click', function() {
    console.log($(this))
    //console.log($(this).attr('data-id'))
    changeUrlParam('id', $(this).attr('data-id'))
});

这样，点击事件将绑定(bind)到具有该类的所有 HTML 元素。

示例:https://codepen.io/anon/pen/eeKLwM?editors=1111