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

Question

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

感谢任何帮助。

Answer 1

我立即发现了一些问题 - 如果您希望在单击按钮时更改内容，那么您必须将 .click() 附加到该内容，而不是您的 .lighthouse class。但是你已经为你的两个按钮提供了相同的 id，所以如果你想 select by id 你必须更改其中一个。类似于：

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

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

希望对您有所帮助！

Answer 2

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

首先，您需要考虑 jQuery 以便 select 内容取决于所点击的按钮：

$('.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;
}

Answer 3

首先，您的代码中有一个双“”，可能来自复制和粘贴...并且您有两个包含两个不同的 jquery 版本（1.8.3 和 1.5.2），这会产生意想不到的行为。

您希望有一个灯箱可以根据点击 link 更改其标题和说明。有很多方法可以做到这一点，在您当前的 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');
        });
    });

  });

我为可能的解决方案创建了一个 fiddle：http://jsfiddle.net/Macavity/d84vft2k/1/

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

Show different content in lightbox when button is clicked

html

javascript

jquery

button

lightbox