显示在收藏夹不同的内容单击按钮时

我是新来的JavaScript/jQuery和我目前有显示在按钮收藏不同内容的问题，请单击使用JavaScript/jQuery的显示在收藏夹不同的内容单击按钮时

我创建了被认为两个按钮在按钮被点击时显示具有不同内容的灯箱。对于每个按钮，灯箱内的内容应该不同，但目前情况并非如此。

当我试图改变第一h3和p标记为第一个按钮，它只是重叠为第二个按钮的第二h3和p标签。我相信问题在于javascript代码，但我无法弄清楚如何在按钮点击时为每个灯箱显示不同的内容。

这里是我的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>

任何帮助表示赞赏。

来源

2015-04-08 NohmanJ

我立即看到几个问题 - 如果您希望内容在您点击按钮时发生变化，那么您必须将.click（）附加到，而不是您的.lighthouse类。但是你已经给了你的两个按钮相同的ID，所以如果你想通过ID选择你必须改变其中的一个。像这样：

$('#contact-submit-first').click(function(){ 
    //change content on first button click 
}); 

$('#contact-submit-second').click(function(){ 
    //change content on second button click 
});

希望这有助于！

来源

2015-04-08 13:38:19 Croftc

谢谢，您的解决方案藏汉为我工作。 – NohmanJ

如果目标是有两个单独的按钮，其打开两个不同的收藏夹，你必须检查你的代码：

一是，你需要考虑你的jQuery，使其根据选择内容在按钮上点击：

$('.lightbox').click(function(){ 
    $(this).next('.box').addClass('active'); 
}); 

$('.close').click(function(){ 
    $(this).parent('.box').removeClass('active'); 
});

然后，使用CSS3来管理动画：

.box { 
    display: none; 
    opacity: 0; 
    transition: all 0.4s ease; 
} 

.box.active { 
    opacity: 1; 
    display: block; 
}

来源

2015-04-08 13:39:58 Theio

首先，您的代码中有一个双“”，可能来自复制&粘贴......并且您有两个包含两个不同的jquery版本（1.8.3和1.5.2），它们可以生成意外的行为。

您想让一个灯箱根据点击的链接更改其标题和描述。有很多方法可以做到这一点，在你当前的HTML中，你遇到的问题是你有不止一次具有相同ID的元素，这会产生奇怪的效果。因此，我们首先将第二个灯箱全部删除。

然后，你需要保存有关标题和描述信息的地方，因此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>

我加在href目标收藏为好。

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

    });

我创建了一个捣鼓一个可能的解决方案：很多你的帮助http://jsfiddle.net/Macavity/d84vft2k/1/

来源

2015-04-08 14:00:30 Pape

显示在收藏夹不同的内容单击按钮时

回答

相关问题