Question

我正在尝试从服务器获取一些数据。我以列表的形式显示它。列表显示得很好。但是，当用户单击列表项时;用户应该在模态中看到与该特定列表项相关的内容。怎么办呢？

这是我的代码：

<!DOCTYPE>
<html>
<head>
    <title>Pagination tutorial</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://bootswatch.com/yeti/bootstrap.min.css" type="text/css">

    <style>
    #pagination div { display: inline-block; margin-right: 5px; margin-top: 5px }
    #pagination .cell a { border-radius: 3px; font-size: 11px; color: #333; padding: 8px; text-decoration:none; border: 1px solid #d3d3d3; background-color: #f8f8f8; }
    #pagination .cell a:hover { border: 1px solid #c6c6c6; background-color: #f0f0f0;  }
    #pagination .cell_active span { border-radius: 3px; font-size: 11px; color: #333; padding: 8px; border: 1px solid #c6c6c6; background-color: #e9e9e9; }
    #pagination .cell_disabled span { border-radius: 3px; font-size: 11px; color: #777777; padding: 8px; border: 1px solid #dddddd; background-color: #ffffff; }
    </style>
</head>

<body>
<div id="articleArea"></div> <!-- Where articles appear -->

<!-- Where pagination appears -->
<div id="pagination">
    <!-- Just tell the system we start with page 1 (id=1) -->
    <!-- See the .js file, we trigger a click when page is loaded -->
    <div><a href="#" id="1"></a></div>
</div>

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="tuto-pagination.js"></script>

</body>
</html>

我的javascript代码如下：

$('document').ready(function() {
    $("#pagination a").trigger('click'); // When page is loaded we trigger a click
});

$('#pagination').on('click', 'a', function(e) { // When click on a 'a' element of the pagination div
    var page = this.id; // Page number is the id of the 'a' element
    var pagination = ''; // Init pagination

    $('#articleArea').html('<img src="loader-small.gif" alt="" />'); // Display a processing icon
    var data = {page: page, per_page: 4}; // Create JSON which will be sent via Ajax
    // We set up the per_page var at 4. You may change to any number you need.

    console.log('Ajax sent');

    $.ajax({ // jQuery Ajax

        type: 'POST',
        url: 'tuto-pagination.php', // URL to the PHP file which will insert new value in the database
        data: data, // We send the data string
        dataType: 'json', // Json format
        timeout: 3000,
        success: function(data) {

var displayData='';

                for (var i = 0; i < data.articleList.length; i++) {
                    var gotData = data.articleList[i];

                    displayData += '<div class="well well-sm">' + gotData.profile_id + '. <b>' + gotData.first_name + '</b><p>' + gotData.surname + '</p></div>';

$('body').on('click','.well well-sm',function(){

                    var list = gotData;
openModal(list,data);                   
                    });

function openModal(list,data){
                $('#myModal .modal-title').html(list.html());
                $('#myModal .modal-body').html(data);
                $('.modalTrigger').trigger('click');
            }

            // Pagination system
            if (page == 1) pagination += '<div class="cell_disabled"><span>First</span></div><div class="cell_disabled"><span>Previous</span></div>';
            else pagination += '<div class="cell"><a href="#" id="1">First</a></div><div class="cell"><a href="#" id="' + (page - 1) + '">Previous</span></a></div>';

            for (var i=parseInt(page)-3; i<=parseInt(page)+3; i++) {
                if (i >= 1 && i <= data.numPage) {
                    pagination += '<div';
                    if (i == page) pagination += ' class="cell_active"><span>' + i + '</span>';
                    else pagination += ' class="cell"><a href="#" id="' + i + '">' + i + '</a>';
                    pagination += '</div>';
                }
            }

            if (page == data.numPage) pagination += '<div class="cell_disabled"><span>Next</span></div><div class="cell_disabled"><span>Last</span></div>';
            else pagination += '<div class="cell"><a href="#" id="' + (parseInt(page) + 1) + '">Next</a></div><div class="cell"><a href="#" id="' + data.numPage + '">Last</span></a></div>';

            $('#pagination').html(pagination); // We update the pagination DIV
        },
        error: function() {
        }
    });
    return false;
});

Answer 1

从后端获取信息时，如下面的代码所示创建列表，仅显示前4个字段，并向26个字段的其余字段添加隐藏的类。根据需要构造列表项。在这里，我在div.well中使用了p标记，其中显示了第一个p-tag，并隐藏了p-tags的其余部分。

现在，只要用户点击div-well（即列表），我就会从中获取html数据，并从p-tag中删除.hidden类。你也可以尝试拥有自己的html structure（以某种方式使它更容易操作）。

displayData += '<div class="well well-sm"><p>' + gotData.profile_id + '. <b>' + gotData.first_name + '</b>' + gotData.surname + '</p>';
                displayData += '<p class="hidden">'+gotData.address+'</p>'+'<p class="hidden">'+gotData.gender+'</p>'+'<p class="hidden">'+gotData.dob+'</p>';
                displayData += '</div>';

然后，每当用户点击列表项时，从列表中获取数据并以模态显示，这样就不必创建多个div。

$(function(){
  $('body').on('click','div.well.well-sm',function(){
    var list = $(this);
    var data=list.html();
     $('#myModal .modal-title').html('User Information');
    $('#myModal .modal-body').html(data);
    $('#myModal .modal-body p').removeClass('hidden');
    $('.modalTrigger').trigger('click');;
    
  });
  
  
});

.margin-top-md{
 margin-top: 10px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="well well-sm margin-top-md">
    <p>1. John White</p>
    <p class="hidden">Country: UK</p>
    <p class="hidden">DOB: 29 July</p>
    <p class="hidden">Gender:M</p>
  </div>
  <div class="well well-sm margin-top-md">
    <p>4. Ray</p>
    <p class="hidden">Country: IN</p>
    <p class="hidden">DOB: 29 Aug</p>
    <p class="hidden">Gender: M</p>
  </div>
   <div class="well well-sm margin-top-md">
    <p>3. Nick Cole</p>
    <p class="hidden">Country: US</p>
    <p class="hidden">DOB: 29 Sep</p>
    <p class="hidden">Gender:M</p>
  </div>
</div>

<button type="button" class="btn btn-primary btn-lg hidden modalTrigger" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
       
      </div>
    </div>
  </div>
</div>

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

$(function() {
 $("#pagination a").trigger('click'); // When page is loaded we trigger a click


$('#pagination').on('click', 'a', function(e) { // When click on a 'a' element of the pagination div
    var page = this.id; // Page number is the id of the 'a' element
    var pagination = ''; // Init pagination

    $('#articleArea').html('<img src="loader-small.gif" alt="" />'); // Display a processing icon
    var data = {page: page, per_page: 4}; // Create JSON which will be sent via Ajax
    // We set up the per_page var at 4. You may change to any number you need.

    console.log('Ajax sent');

    $.ajax({ // jQuery Ajax

        type: 'POST',
        url: 'tuto-pagination.php', // URL to the PHP file which will insert new value in the database
        data: data, // We send the data string
        dataType: 'json', // Json format
        timeout: 3000,
        success: function(data) {

            var displayData='';

            for (var i = 0; i < data.articleList.length; i++) {
                var gotData = data.articleList[i];

                displayData += '<div class="well well-sm"><p>' + gotData.profile_id + '. <b>' + gotData.first_name + '</b>' + gotData.surname + '</p>';
                displayData += '<p class="hidden">'+gotData.address+'</p>'+'<p class="hidden">'+gotData.gender+'</p>'+'<p class="hidden">'+gotData.dob+'</p>';
                displayData += '</div>';

                // Pagination system
                if (page == 1) pagination += '<div class="cell_disabled"><span>First</span></div><div class="cell_disabled"><span>Previous</span></div>';
                else pagination += '<div class="cell"><a href="#" id="1">First</a></div><div class="cell"><a href="#" id="' + (page - 1) + '">Previous</span></a></div>';

                for (var i=parseInt(page)-3; i<=parseInt(page)+3; i++) {
                    if (i >= 1 && i <= data.numPage) {
                        pagination += '<div';
                        if (i == page) pagination += ' class="cell_active"><span>' + i + '</span>';
                        else pagination += ' class="cell"><a href="#" id="' + i + '">' + i + '</a>';
                        pagination += '</div>';
                    }
                }

                if (page == data.numPage){
                    pagination += '<div class="cell_disabled"><span>Next</span></div><div class="cell_disabled"><span>Last</span></div>';
                }
                else {
                    pagination += '<div class="cell"><a href="#" id="' + (parseInt(page) + 1) + '">Next</a></div><div class="cell"><a href="#" id="' + data.numPage + '">Last</span></a></div>';
                }
                $('#articleArea').html(displayData);//replacing img with data
                $('#pagination').html(pagination); // We update the pagination DIV
            }
        },
        error: function() {
            //your code
        }
    });
    return false;
});

$('body').on('click','div.well well-sm',function(){
    var list = $(this);
    $('#myModal .modal-title').html('User Information');
    $('#myModal .modal-body').html(list.html());
    $('#myModal .modal-body p').removeClass('hidden');
    $('.modalTrigger').trigger('click');
});

});

如何在点击动态生成的每个项目时弹出模态？

1 个答案: