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

Show different content in lightbox when button is clicked

本文关键字：显示 按钮 单击      更新时间：2023-09-26

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

感谢您的帮助。

我马上就看到了一些问题-如果你想在点击按钮时更改内容，那就是你必须将.click（）附加到的，而不是你的.blighthouse类。但是你给了两个按钮相同的id，所以如果你想按id选择，你必须更改其中一个。类似于：

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

希望这能有所帮助！

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

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

首先，您的代码中有一个双"，可能来自copy&粘贴您有两个包含两个不同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/

相关文章：