单击按钮时，在灯箱中显示不同的内容
[英]Show different content in lightbox when button is clicked
问题描述
I am new to javascript/jquery and I currently have a problem with showing different content in lightbox upon button click with javascript/jquery 
我是javascript / jquery的新手，当前在单击javascript / jquery时在灯箱中显示不同内容存在问题
I have created two buttons which is supposed to show a lightbox with different content when button is clicked. 我创建了两个按钮，当单击按钮时，它们应该显示一个具有不同内容的灯箱。 The content inside the lightbox should be different for each button which is not the case at the moment. 灯箱内的内容对于每个按钮都应该有所不同，目前并非如此。
When I try to change the first h3 and p tag for the first button, it just overlaps the second h3 and p tag for the second button. 当我尝试更改第一个按钮的第一个h3和p标签时，它仅与第二个按钮的第二个h3和p标签重叠。 I believe the problem lies in the javascript code, but I can't figure out how to show different content for each lightbox upon button click. 我认为问题出在JavaScript代码中，但我无法弄清楚如何在单击按钮时为每个灯箱显示不同的内容。
Here is my HTML/Javascript code: 这是我的HTML / JavaScript代码：
<!DOCTYPE html> <html lang="no"> <head> <title>FantasyLab</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> $(document).ready(function(){ $('.lightbox').click(function(){ $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear'); $('.box').animate({'opacity':'1.00'}, 300, 'linear'); $('.backdrop, .box').css('display', 'block'); }); $('.close').click(function(){ close_box(); }); $('.backdrop').click(function(){ close_box(); }); }); function close_box() { $('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){ $('.backdrop, .box').css('display', 'none'); }); } </script> </script> </head> <body bgcolor="#060e19"> <div class="page-wrap"> <a href="#" class="lightbox" id="contact">Kom i kontakt</a> <div class="box"> <div class="close"><i class="fa fa-times fa-1x"></i></div> <!-- end of close --> <h3 class="title">Kom i kontakt</h3> <p>Kontakt oss for mer informasjon</p> <div class="container"> <form id="newsletter-subscription" action="" method="post"> <fieldset> <input placeholder="Fornavn" type="text" tabindex="1" required autofocus> </fieldset> <!-- end of fieldset --> <fieldset> <input placeholder="Etternavn" type="text" tabindex="2" required autofocus> </fieldset> <!-- end of fieldset --> <fieldset> <input placeholder="E-postadresse" type="email" tabindex="3" required> </fieldset> <!-- end of fieldset --> <fieldset> <input placeholder="Telefonnummer" type="tel" tabindex="4" required> </fieldset> <!-- end of fieldset --> <fieldset> <input placeholder="Webside http://" type="url" tabindex="5" required> </fieldset> <!-- end of fieldset --> <fieldset> <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Send inn</button> </fieldset> </form> <!-- end of form --> </div> <!-- end of container --> </div> <!-- end of box-content --> <a href="#" class="lightbox" id="subscribe">Meld deg på vår nyhetsbrev</a> <div class="backdrop"></div> <!-- end of backdrop --> <div class="box"> <div class="close"><i class="fa fa-times fa-1x"></i></div> <!-- end of close --> <h3 class="title">Abonner på nyhetsbrev</h3> <p>Motta informasjon rundt lanseringsdato, kampanjer og tilbud.</p> <div class="container"> <form id="newsletter-subscription" action="" method="post"> <fieldset> <input placeholder="Fornavn" type="text" tabindex="1" required autofocus> </fieldset> <!-- end of fieldset --> <fieldset> <input placeholder="Etternavn" type="text" tabindex="2" required autofocus> </fieldset> <!-- end of fieldset --> <fieldset> <input placeholder="E-postadresse" type="email" tabindex="3" required> </fieldset> <!-- end of fieldset --> <fieldset> <input placeholder="Telefonnummer" type="tel" tabindex="4" required> </fieldset> <!-- end of fieldset --> <fieldset> <input placeholder="Webside http://" type="url" tabindex="5" required> </fieldset> <!-- end of fieldset --> <fieldset> <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Send inn</button> </fieldset> </form> <!-- end of form --> </div> <!-- end of container --> </div> <!-- end of box-content --> </div> <!-- end of main-content --> </div> <!-- end of page-wrap --> </body> </html>
Any help is appreciated. 任何帮助表示赞赏。
3 个解决方案
解决方案1
0 已采纳 2015-04-08 13:38:19
There are a few issues I see immediately - If you want the content to change when you click the button, that's what you have to attach the .click() to, not your .lighthouse class. 我会立即看到一些问题-如果您希望在单击按钮时更改内容，则必须附加.click（）而不是.lighthouse类。 But you've given both of your buttons the same id, so if you want to select by id you have to change one of them. 但是，您已经为两个按钮指定了相同的ID，因此，如果要按ID选择，则必须更改其中之一。 something like: 就像是：
$('#contact-submit-first').click(function(){
//change content on first button click
});
$('#contact-submit-second').click(function(){
//change content on second button click
});
Hope this helps! 希望这可以帮助！
解决方案2
0 2015-04-08 13:39:58
If your objective is to have two separate buttons which open two different lightbox, you have to review you're code : 如果您的目标是要使用两个单独的按钮来打开两个不同的灯箱，则必须查看代码：
First, you need to think your jQuery so that it select the content depending on the button clicked :
首先，您需要考虑一下jQuery，以便它根据单击的按钮来选择内容： $('.lightbox').click(function(){ $(this).next('.box').addClass('active'); }); $('.close').click(function(){ $(this).parent('.box').removeClass('active'); });Then, you use CSS3 to manage the animations :
然后，使用CSS3来管理动画： .box { display: none; opacity: 0; transition: all 0.4s ease; } .box.active { opacity: 1; display: block; }
解决方案3
0 2015-04-08 14:00:30
First of all, you have a double "" in your code, probably from copy & paste... and you have two includes of two different jquery versions (1.8.3 and 1.5.2), which can produce unexpected behaviour. 首先，您的代码中有一个双“”，可能是通过复制和粘贴...而来的，其中有两个包含两个不同的jquery版本（1.8.3和1.5.2），它们会产生意外的行为。
You want to have one lightbox that changes its title and description based on the clicked link. 您希望有一个灯箱可以根据单击的链接更改其标题和说明。 There are many ways to do this, in your current html you got the problem that you have elements with the same IDs more than once, which will produce strange effects propable. 有很多方法可以做到这一点，在当前的html中，您会遇到一个问题，即您具有不止一次具有相同ID的元素，这将产生奇怪的效果。 So let's first remove the second lightbox alltogether. 因此，让我们首先一起删除第二个灯箱。
Then you need to save the information about title and description somewhere so the javascript can retrieve it, i would suggest data attributes like this: 然后，您需要将有关标题和描述的信息保存在某个地方，以便javascript可以检索它，我建议使用如下数据属性：
<a href="#lbContact" class="lightbox" id="contact" data-box-title="Kom i kontakt" data-box-description="Kontakt oss for mer informasjon">
Kom i kontakt
</a>
<a href="#lbContact" class="lightbox" id="subscribe" data-box-title="Abonner på nyhetsbrev" data-box-description="Motta informasjon rundt lanseringsdato, kampanjer og tilbud.">
Meld deg på vår nyhetsbrev
</a>
I added the target lightbox in the href as well. 我也在目标href中添加了目标灯箱。
The javascript could then look like this: JavaScript可能如下所示：
$(document).ready(function(){
$('.lightbox').click(function(){
// Get the hash attribute from the clicked link/button
var targetLightbox = $(this.hash);
var link = $(this);
var title = link.data("box-title");
var description = link.data("box-description");
// Copy title and description into the lightbox
targetLightbox.find(".title").text(title);
targetLightbox.find(".description").text(description);
$('.backdrop').animate({'opacity':'.50'}, 300, 'linear');
$('.box').animate({'opacity':'1.00'}, 300, 'linear');
$('.backdrop, .box').css('display', 'block');
});
// Hide the lightbox and backdrop
$('.close, .backdrop').click(function(){
$('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
$('.backdrop, .box').css('display', 'none');
});
});
});
I created a fiddle for a possible solution: http://jsfiddle.net/Macavity/d84vft2k/1/ 我为可能的解决方案创建了一个提琴： http : //jsfiddle.net/Macavity/d84vft2k/1/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.