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

时间:2014-09-15 21:56:11

标签: html

我正在处理以下脚本:

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框中使用它时,登录按钮变得无用..

任何想法如何让所有的盒子做同样的动作(转到登录表格)?

2 个答案:

答案 0 :(得分:0)

只需使用一个类并使用jQuery(如果你使用它很好,我认为你是这样的)做这样的事情:

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

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

答案 1 :(得分:0)

该功能仅适用于一种情况的原因是&#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

    });