个人中心
gpt4 book ai didi

javascript - 如何在单击动态生成的每个项目时弹出模式？

转载 作者：行者123 更新时间：2023-11-30 12:08:24 25 4
gpt4 key购买 nike

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

这是我的代码:

<!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;
});

最佳答案

当您从后端获取信息时，创建如下代码所示的列表，仅显示前 4 个字段，并为其余 26 个字段添加一个隐藏类。按照您的意愿构造列表项。这里我在 div.well 中使用了 p 标签，其中第一个 p-tag 被显示，其余的 p-tags 被隐藏。

现在，每当用户点击 div-well(这是一个列表)时，我就会从其中获取 html 数据并从中删除 .hidden 类p标签。您也可以类似地尝试拥有自己的 html 结构(以更易于操作的方式拥有)。

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');
});

});

关于javascript - 如何在单击动态生成的每个项目时弹出模式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34543234/

25 4 0
文章推荐： javascript - 在 ion-slide 中设置不同的 html 文件
文章推荐： ios - 创建水平滚动菜单
文章推荐： java - 删除范围不起作用 - Google Sheets API - Swift
文章推荐： javascript - clearInterval()不工作javascript
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com