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类。但是您已经为两个按钮指定了相同的ID，因此如果您想通过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

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

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

Answer 3

首先，你有一个双＆＃34;＆＃34;在您的代码中，可能来自copy＆amp;粘贴...你有两个包含两个不同的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/

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

3 个答案: