- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
所以我发出了一个返回随机图像的 ajax 请求
这是我的ajax请求
$.ajax({
url: 'https://randomuser.me/api/?nat=us&results=12&',
dataType: 'json',
success: function(data) {
console.log(data); //this should log the data for 12 employees in JSON format
var employeeInfo = data.results //creating a reference to data.results
var _cardTemplate = ''; //make variable reference for gallery
var modalBoxContainer = ''; //make variable for modal containers
$.each(employeeInfo, function(index, employee) {
//create variable references for Name, email, city,state, etc
var name = employee.name.first + " " + employee.name.last;
var email = employee.email;
var picture = employee.picture.large;
var location = employee.location.city;
var number = employee.phone;
var fullStreet = employee.location.street + " " + location + " " + employee.location.postcode;
var birthday = employee.dob.date;
//CREATE GALLERY CARDS AND SHOW CONTENT FOR SMALL GALLERY CARDS
_cardTemplate += '<div class="card">';
_cardTemplate += '<div class="card-img-container">';
_cardTemplate += '<img class="card-img" src= "' + picture + '" alt="profile picture"></div>';
_cardTemplate += '<div class="card-info-container"><h3 id="name" class="card-name cap">' + name + '</h3>';
_cardTemplate += '<p class="card-text">' + email + '</p><p class="card-text cap">' + location + '</p>';
_cardTemplate += '</div></div>';
//CREATE MODAL CARDS AND SHOW CONTENT FOR THEM
modalBoxContainer += '<div class="modal-container">';
modalBoxContainer += '<div class="modal">';
modalBoxContainer += '<button type="button" id="modal-close-btn" class="modal-close-btn"><strong>X</strong></button>';
modalBoxContainer += '<div class="modal-info-container"><img class="modal-img" src= "' + picture + '" alt="profile picture"><h3 id="name" class="modal-name cap">' + name + '</h3><p class="modal-text">' + email + '</p><p class="modal-text cap">' + location + '</p>';
modalBoxContainer += '<hr>';
modalBoxContainer += '<p class="modal-text">' + number + '</p><p class="modal-text">' + fullStreet + '</p><p class="modal-text">' + birthday + '</p></div>';
modalBoxContainer += '<div2>';
/*appends an "active" class to .modal(pop-up-window) and .modal-container(overlay) when .card is clicked
I used a code snippet from https://www.pair.com/support/kb/how-to-use-jquery-to-generate-modal-pop-up-when-clicked/
*/
$(document).ready(function() { //this makes sure the function will run only after the elements are fully loaded
$('.card').on("click", function() {
//$(".modal, .modal-container").addClass("active");
$(".modal, .modal-container").addClass("active");
console.log('the modal should pop up after clicking the div card')
});
/*This removes the "active" class to .modal(pop-up-window) and .modal-container
when clicking on: the "X" button, the opened modal or clicking outside the modal,
so the user has 3 ways to close a modal, this improves UX
*/
$('#modal-close-btn, .modal, .modal-container').on("click", function() {
$(".modal, .modal-container").removeClass("active");
console.log('you clicked on the x button');
});
})
});
$('#gallery').append(_cardTemplate); //Append Finally all cards with employee details
//Finally, I will append modalBoxContainer inside body tag
$('body').append(modalBoxContainer);
}
})
我向 $('.card') 添加了事件监听器,这是 12 张卡片,以便显示 $(".modal, .modal-container") 这些是模态和覆盖层,我最终得到了无论我点击哪张图片,都使用相同的模式,有人可以帮助我,以便我可以看到与每个小画廊的相同信息匹配的模式
最佳答案
我提供了一般指南和代码大纲。随时要求澄清。
我正在编写的代码既不完整也不高效,但它应该作为一个起点。
您需要在您点击的卡片和您想要打开的模式之间保持关联。
你现在没有这样做。
您可以使用 jQuery 的数据功能 (https://api.jquery.com/data/) 或普通 ID 来做到这一点。
首先,在每个卡片模板上添加一个索引数据属性或为该模板构建一个 id。你有来自 $.each
的索引然后为每个模式创建一个单独的 div。每个 div 应该有一个与相应卡片对应的索引。
您在所有卡片上添加一个点击处理程序,您只激活与其对应的模态。
$.ajax({
url: 'https://randomuser.me/api/?nat=us&results=12&',
dataType: 'json',
success: function(data) {
console.log(data); //this should log the data for 12 employees in JSON format
var employeeInfo = data.results //creating a reference to data.results
var _cardTemplate = ''; //make variable reference for gallery
//start the container outside the loop:
var modalBoxContainer = '<div class="modal-container">';
$.each(employeeInfo, function(index, employee) {
//create variable references for Name, email, city,state, etc
var name = employee.name.first + " " + employee.name.last;
var email = employee.email;
var picture = employee.picture.large;
var location = employee.location.city;
var number = employee.phone;
var fullStreet = employee.location.street + " " + location + " " + employee.location.postcode;
var birthday = employee.dob.date;
_cardTemplate += '<div class="card" data-index="'+index+'">';
_cardTemplate += '<div class="card-img-container">';
_cardTemplate += '<img class="card-img" src= "' + picture + '" alt="profile picture"></div>';
_cardTemplate += '<div class="card-info-container"><h3 id="name" class="card-name cap">' + name + '</h3>';
_cardTemplate += '<p class="card-text">' + email + '</p><p class="card-text cap">' + location + '</p>';
_cardTemplate += '</div></div>';
//add each
modalBoxContainer += '<div class="modal" data-index="'+index+'">';
modalBoxContainer += '<button type="button" id="modal-close-btn" class="modal-close-btn"><strong>X</strong></button>';
modalBoxContainer += '<div class="modal-info-container"><img class="modal-img" src= "' + picture + '" alt="profile picture"><h3 id="name" class="modal-name cap">' + name + '</h3><p class="modal-text">' + email + '</p><p class="modal-text cap">' + location + '</p>';
modalBoxContainer += '<hr>';
modalBoxContainer += '<p class="modal-text">' + number + '</p><p class="modal-text">' + fullStreet + '</p><p class="modal-text">' + birthday + '</p></div>';
});
//close container:
modalBoxContainer += "</div>";
$(document).ready(function() { //this makes sure the function will run only after the elements are fully loaded
$('.card').on("click", function() {
var theIndex = $(this).data("index");
$(".modal", $(".modal-container")).each(function(index){
if( $(this).data("index") === theIndex) $(this).addClass("active");
else $(this).removeClass("active");
});
});
$('#modal-close-btn, .modal, .modal-container').on("click", function() {
$(".modal", $(".modal-container")).removeClass("active");
console.log('you clicked on the x button');
});
})
$('#gallery').append(_cardTemplate); //Append Finally all cards with employee details
//Finally, I will append modalBoxContainer inside body tag
$('body').append(modalBoxContainer);
}
})
关于javascript - 需要帮助处理点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53917097/
我有这个问题: 我们声称对 float 使用相等测试是不安全的,因为算术运算会引入舍入错误,这意味着两个应该相等的数字实际上并不相等。 对于这个程序,您应该选择一个数字 N,并编写一个程序来显示 1
为什么这个脚本的输出是 5 而不是 8 ? 我认为 -- 意味着 -1 两次。 var x = 0; var y = 10; while ( x
我现在可以从 cmd 窗口中执行的 FFmpeg 过程中读取最后一行。 使用脚本主机模型对象引用此源。 Private Sub Command1_Click() Dim oExec
使用 vlookup,当匹配发生时,我想从匹配发生的同一行显示工作表 2 中 C 列的值。我想出的公式从 C 列表 2 中获取值,但它从公式粘贴在表 3 上的行中获取,而不是从匹配发生的位置获取。 这
我在破译 WCF 跟踪文件时遇到了问题,我希望有人能帮助我确定管道中的哪个位置发生了延迟。 “Processing Message XX”的跟踪如下所示,在事件边界和传输到“Process Actio
我有四个表,USER、CONTACT、CONACT_TYPE 和 USER_CONTACT USER_CONTACT 存储用户具有填充虚拟数据的表的所有联系人如下 用户表 USER_ID(int)|
以下有什么作用? public static function find_by_sql($sql="") { global $database; $result_set = $data
我正在解决 JavaBat 问题并且对我的逻辑感到困惑。 这是任务: Given a day of the week encoded as 0=Sun, 1=Mon, 2=Tue, ...6=Sat,
我正在研究一些 Scala 代码,发现这种方法让我感到困惑。在匹配语句中,sublist@ 是什么?构造?它包含什么样的值(value)?当我打印它时,它与 tail 没有区别,但如果我用尾部替换它,
我正在使用以下代码自行缩放图像。代码很好,图像缩放也没有问题。 UIImage *originImg = img; size = newSize; if (originImg.size.width >
Instruments 无法在我的 iPad 和 iPhone 上启动。两者都已正确配置,我可以毫无问题地从 xcode 调试它们上的代码,但 Instruments 无法启动。 我听到的只是一声嘟嘟
我想用 iPhone 的 NSRegularExpression 类解析此文本: Uploaded652.81 GB 用于摘录上传和652.81文本。 最佳答案 虽然我确实认为 xml 解析器更适合解
我找到了 solution在 Stackoverflow 上,根据过滤器显示 HTML“li”元素(请参阅附件)。本质上基于 HTML 元素中定义的 css 类,它填充您可以从中选择的下拉列表。 我想
这是一个简单的问题,但我是在 SQL 2005 中形成 XML 的新手,但是用于形成如下所示表中的 XML 的最佳 FOR XML SQL 语句是什么? Column1 Column2 -
我在 www.enigmafest.com 有一个网站!您可以尝试打开它!我面临的问题是,在预加载器完成后,主页会出现,但其他菜单仍然需要很长时间才能加载,而且声音也至少需要 5 分钟! :( 我怎样
好吧,我正在尝试用 Haskell 来理解 IO,我想我应该编写一个处理网页的简短小应用程序来完成它。我被绊倒的代码片段是(向 bobince 表示歉意,但公平地说,我并不想在这里解析 HTML,只是
如何使用背景页面来突出显示网站上的某个关键字,无论网站是什么(谷歌浏览器扩展)?没有弹出窗口或任何东西,它只是在某人正在查看的网站上编辑关键字。我以前见过这样的,就是不明白怎么做!谢谢你的帮助。 最佳
我是 Javascript 新手,需要一些帮助。 先看图片: . 积分预测器应用程序。 基本上当用户通过单选按钮选择获胜团队时它应该在积分栏中为获胜队添加 10 分,并且并根据得分高的球队自动对表格进
这是我的情况 - 我要发送一份时事通讯,我试图做的是,当用户单击电子邮件中的链接时,它会重定向到我的网页,然后会弹出一个灯箱,显示视频。我无法在页面加载时触发灯箱,因为您可以在查看灯箱之前转到同一页面
我有这个代码。 ¿Cuanto es ? Ir 我想获取用户输入的“验证码”值。我尝试这个但行不通。有什么帮助吗? var campo = d
我是一名优秀的程序员,十分优秀!