单击按钮时在灯箱中显示不同的内容答案

【问题标题】：Show different content in lightbox when button is clicked单击按钮时在灯箱中显示不同的内容
【发布时间】：2015-04-08 23:55:43
【问题描述】：

我是 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>

感谢任何帮助。

【问题讨论】：

标签： javascript jquery html button lightbox

【解决方案1】：

我立即看到了一些问题 - 如果您希望在单击按钮时更改内容，这就是您必须将 .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
});

希望这会有所帮助！

【讨论】：

非常感谢您的帮助，您的解决方案对我也很有效。

【解决方案2】：

如果您的目标是有两个单独的按钮来打开两个不同的灯箱，您必须检查您的代码：

首先，您需要考虑您的 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;
}

【讨论】：

【解决方案3】：

首先，您的代码中有一个双“”，可能来自复制和粘贴...并且您有两个包含两个不同 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/

【讨论】：