javascript，获取第二个类

javascript, get the second class

本文关键字：第二个 获取 javascript      更新时间：2023-09-26

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中，我使用它们都有的类。我该怎么解决这个问题？我应该将javascript代码加倍，并使用"something"来区分第二个类和第一个类（例如第一个模态和第二个模态）吗。。

您需要使用.next()

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

工作演示

或者你可以直接使用

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

工作演示

相关文章：