Question

我正在处理以下脚本：

http://www.andwecode.com/playground-demo/pop-up-login-signup-box-jquery/pop-up-demo.zip

这是一个为您提供弹出式登录表单的脚本。

当我点击底部的登录按钮时，我希望gmail和fb框（以及我要添加的任何框）执行相同的操作（动作=登录表单出现）。

我在Gmail框中试过这个：

<a href="#1" class="social_box google" id="login_form" > <span class="icon"><i class="fa fa-google-plus"></i></span>

基本上，我添加了ID：(id="login_form")，它运行正常！

问题是您只能使用一次ID。

例如，当我在Gmail框中使用它时，登录按钮变得无用..

任何想法如何让所有的盒子做同样的动作（转到登录表格）？

Answer 1

只需使用一个类并使用jQuery（如果你使用它很好，我认为你是这样的）做这样的事情：

$('.selector').click(function() {
    //code
    alert('clicked!'); //just to test...
});

如果我正确地阅读了你的问题，它应该做你想做的事。

Answer 2

该功能仅适用于一种情况的原因是＆＃39; ID's必须是唯一的 ，如果您有重复的ID，它会识别只有第一个元素的id，它将忽略其余元素。

您可以通过两种方式实现结果

1）对于所有框fb框，Google框等具有相同的类 示例：所有框的 box-form 类

<强> HTML：

<a href="#1" class="social_box google box-form"  >
<span class="icon"><i class="fa fa-google-plus"></i></span>
<a href="#1" class="social_box fb box-form"  >
<span class="icon"><i class="fa fa-google-plus"></i></span>

<强> Jquery的：

$('.box-form').click(function() {
    //code

});

2）为每个框应用不同的id并在jquery

中组合id

<强> HTML ：

<a href="#1" class="social_box google" id="login-form" >
    <span class="icon"><i class="fa fa-google-plus"></i></span>
    <a href="#1" class="social_box fb"  id="fb-form">
    <span class="icon"><i class="fa fa-google-plus"></i></span>

<强> Jquery的：

$('#login-form, #fb-form').click(function() {
        //code

    });

重复的id问题，无法重用id

2 个答案: