javascript，获得第二类

Question

HTML代码:

<span class="button" onclick="javascript:buttonClicked();">Sign In</span>       
<div class="modal-bg" style="display: none;">
    <div class="modal">
        <span>Sign In<a href="#close" class="close">&#215;</a></span>
        <form>
            <input id="username" name="username" type="textbox" placeholder="Username" required>
            <input id="password" name="password" type="password" placeholder="Password" required>
            <a id="forgot-link" href="#">Forgot password?</a>
            <button name="submit" id="submit" type="submit">Sign in</button>
        </form>
    </div>
</div>

用于登录按钮。对于注册:

<span class="button" onclick="javascript:buttonClicked();">Sign Up</span>
<div class="modal-bg" style="display: none;">
<div class="modal">
<span>Sign Up<a href="#close" class="close">&#215;</a></span>
<form>
    <input id="FistName" name="FistName" type="textbox" placeholder="Fist Name" required>
    <input id="LastName" name="LastName" type="textbox" placeholder="Last Name" required>
    <input id="email" name="email" type="email" placeholder="Email" required>
    <input id="username" name="username" type="textbox" placeholder="Username" required>
    <input id="password" name="password" type="password" placeholder="Password" required>
    <br><input style="margin: 0 -102px 0;" name="sex" type="radio" value="Male" checked="checked">Male
    <input style="margin: 0 -105px 0;" name="sex" type="radio" value="Female">Female<br>
     &nbsp;&nbsp;&nbsp;Date of Birth<br>
    <select name="month" onChange="changeDate(this.options[selectedIndex].value);">
    <option value="na">Month</option>
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
    </select>
    <select name="day" id="day">
    <option value="na">Day</option>
    </select>
    <select name="year" id="year">
    <option value="na">Year</option>
    </select>
    <input id="Adress" name="Adress" type="textbox" placeholder="Street address">
    <button name="submit" id="submit" type="submit">Sign up</button>
</form>
</div>
</div>

**Javascript 代码:

<script>
      $('.button').click(function(){
      $('.modal').css('display','block');
      $('.modal-bg').fadeIn();
});    
</script>

<script>
          $('.close').click(function(){
          $('.modal-bg').fadeOut();     
          $('.modal').fadeOut();
      return false;
    });    
</script>

<script>function buttonClicked()
{
$('.modal').show();
}
</script>

单击登录和注册按钮时会出现一个弹出窗口。问题是，如果您单击登录或注册按钮，则会出现注册按钮。因为它是第二个，并且在我的 javascript 中我使用他们两个都有的类(class)。我该如何解决这个问题？我应该加倍javascript代码并使用“东西”来区分第二类和第一类(例如第一模态和第二模态)以及如何？ ..

Answer 1

你需要使用.next()

$('.button').click(function(){
      $(this).next('.modal-bg').css('display','block');
      $(this).next('.modal-bg').find('.modal').fadeIn();
});  

Working Demo

或者你可以直接使用

$('.button').click(function(){
      $(this).next('.modal-bg').fadeIn(2000);
});   

Working Demo