javascript - 如何在单击链接时传递动态值？

Question

我正在使用下面提到的代码。

<a  href='#'  onClick='$(\"div#reboot-modal\").modal();' >

调用模型代码:

    printf( '<div class="modal" id="reboot-modal" style="display: none; color: black;">' );
    printf( '<h1>Drive Info</h1>' );
    printf('<ul style="list-style-type: none;padding: 8px;margin-top: 0px;margin-bottom: 0px;">');
    printf( '<li><b>Link Speed:</b></li>'  );
    printf( '<li><b>Serial Number:</b></li>   );
    printf( '<li><b>Model Number:</b></li>'           );
    printf( '<li><b>Boot Loader:</b></li>'        );
    printf( '<li><b>LightSwitch Rev:</b></li>'  );
    printf( '<li><b>TWIDL Version:</b></li>'  );
    printf( '</ul>');
    printf( '</a>' );
    printf( '</div>' );

Onclick Reboot-modal time，我需要动态传递六个值，当对话框调用那个时候，这个值需要打印在这里。

任何解决方案都是可取的。提前致谢。

Answer 1

最好你可以循环 #reboot-modal-{id} 以获取不同的动态模式，并使用适当的 Bootstrap 类。

<?php foreach($users as $user): ?>
    <a href='#' data-toggle="modal" data-target="#reboot-modal" data-dbid="<?php echo $user['id']; ?>">Click <?php echo $user['id']; ?> Here....</a>
<?php endforeach; ?>

<div class="modal fade" id="reboot-modal" style="display: none; color: black;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title">Drive Info</h4>
</div>
<div class="modal-body">
<ul class="list-unstyled">
<li><b>Link Speed:</b>&nbsp;<span id='rb-link'></span></li>
<li><b>Serial Number:</b>&nbsp;<span id='rb-serial'></span></li>
<li><b>Model Number:</b>&nbsp;<span id='rb-model'></span></li>
<li><b>Boot Loader:</b>&nbsp;<span id='rb-loader'></span></li>
<li><b>LightSwitch Rev:</b>&nbsp;<span id='rb-light'></span></li>
<li><b>TWIDL Version:</b>&nbsp;<span id='rb-twidl'></span></li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$('#reboot-modal').on('show.bs.modal', function(e) {
        //THIS YOUR DATABASE ID COMES FROM CURRNET CLICKED LINK
        var dbId = $(e.relatedTarget).attr('data-dbid');
        $.ajax({
            cache: false,
            type: 'POST',
            url: 'newfile.php',
            data: {"dbId":dbId},
            dataType: "json",
            success: function(data) {
                $('#rb-link').html(data.rb_link);
                $('#rb-serial').html(data.rb_serial);
                $('#rb-model').html(data.rb_model);
                $('#rb-loader').html(data.rb_loader);
                $('#rb-light').html(data.rb_light);
                $('#rb-twidl').html(data.rb_twidl);
            }
        });
});
</script>

新的 PHP 文件:(newfile.php)

    // NEW PHP FILE FOR AJAX REQUEST AND RESPONSE
    include('db_connection.php');
    $sql = mysqli_query("select * from users where id=".$dbId);
    $rows = array();
    while($row = mysqli_fetch_assoc($sql)) {
        $rows['rb_link'] = $row['db_link'];
        $rows['rb_serial'] = $row['db_serial'];
        $rows['rb_model'] = $row['db_model'];
        $rows['rb_loader'] = $row['db_loader'];
        $rows['rb_light'] = $row['db_light'];
        $rows['rb_twidl'] = $row['db_twidl'];
    }
    echo json_encode($rows);

https://jsfiddle.net/t5umn3ha/38/