Question

嗨guyz当我点击

时，我的div的第一个元素正在工作

但是当我点击第二个然后它无法正常工作时，我一无所知[使用click（）fn和单独的id为特定的div id]

有关更好的理解，请参阅jsfiddle

$(document).ready(function () {
    $("#sharer").click(function () {
        var ID = $(this).attr('wid');
        $("#sconta" + ID).show();
        $(".sharer" + ID).hide();
    })
});

<div id="sharer" wid="1" class="sharer1" style="float:right;margin-top: 3px;">Share this post</div>
<div class="sconta" id="sconta1">   
    <a class="selem" id="selem1" href="http://www.facebook.com/sharer/sharer.php?u=http://www.ourcampus.co/post.php?id=1">Fb</a>
    <a class="selem"></a>
    <a class="selem"></a>
    <a class="selem"></a>
    <a class="selem"></a>
</div>

<br/><br/><br/>

<div id="sharer" wid="2" class="sharer2" style="float:right;margin-top: 3px;">Share this post</div>
<div class="sconta" id="sconta2">   
    <a class="selem" id="selem2" href="http://www.facebook.com/sharer/sharer.php?u=http://www.ourcampus.co/post.php?id=2">Fb</a>
    <a class="selem"></a>
    <a class="selem"></a>
    <a class="selem"></a>
    <a class="selem"></a>
</div>

.sconta {
    display: none;
    width: auto;
    float: right;
}
.selem {
    display: block;
    height: 32px;
    margin-right: 2px;
    width: 32px;
    background: red;
    float: left;
}

代码示例 Jsfiddle

Answer 1

您同时使用相同的ID。两个DIV使用不同的Id。 Id必须是唯一的。等级可能相同。

    <div id="sharer" wid="1" class="sharer1" style="float:right;margin-top: 3px;">
Share this post </div>
<div class="sconta" id="sconta1">
        <a class="selem" id="selem1"   href="http://www.facebook.com/sharer/sharer.php?u=http://www.ourcampus.co/post.php?id=1">Fb</a>
        <a class="selem"></a>
        <a class="selem"></a>
        <a class="selem"></a>
        <a class="selem"></a>
        </div>



<br/><br/><br/>

<div id="sharer1" wid="2" class="sharer2" style="float:right;margin-top: 3px;">
Share this post </div>
<div class="sconta" id="sconta2">
        <a class="selem" id="selem2"   href="http://www.facebook.com/sharer/sharer.php?u=http://www.ourcampus.co/post.php?id=2">Fb</a>
        <a class="selem"></a>
        <a class="selem"></a>
        <a class="selem"></a>
        <a class="selem"></a>
        </div>

Answer 2

试试这个..

添加公共类，例如＆＃34; test＆＃34;

添加动态ID以更改您的attr wid

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

.sconta{
        display:none;
        width: auto;
        float: right;   
    }

    .selem{
        display:block;
        height:32px;
        margin-right:2px;
        width:32px; 
        background:red;
        float:left;
    }

<div id="sharer" wid="1" class="sharer1 test" style="float:right;margin-top: 3px;">
Share this post </div>
<div class="sconta" id="sconta1">
        <a class="selem" id="selem1"   href="http://www.facebook.com/sharer/sharer.php?u=http://www.ourcampus.co/post.php?id=1">Fb</a>
        <a class="selem"></a>
        <a class="selem"></a>
        <a class="selem"></a>
        <a class="selem"></a>
        </div>



<br/><br/><br/>

<div id="sharer" wid="2" class="sharer2 test" style="float:right;margin-top: 3px;">
Share this post </div>
<div class="sconta" id="sconta2">
        <a class="selem" id="selem2"   href="http://www.facebook.com/sharer/sharer.php?u=http://www.ourcampus.co/post.php?id=2">Fb</a>
        <a class="selem"></a>
        <a class="selem"></a>
        <a class="selem"></a>
        <a class="selem"></a>
        </div>

            $(document).ready(function(){ 
$(".test").click(function(){
var ID =  $(this).attr('wid');
alert(ID);
$("#sconta"+ID).show(); 
$(".sharer"+ID).hide(); 
}) }) ;

演示：http://jsfiddle.net/rugk01Lp/

Answer 3

使用class而不是id并提供不同的wid值

<div wid="1" class="sharer" style="float:right;margin-top: 3px;">
Share this post </div>
<div class="sconta" id="sconta1">
        <a class="selem" id="selem1"   href="http://www.facebook.com/sharer/sharer.php?u=http://www.ourcampus.co/post.php?id=1">Fb</a>
        <a class="selem"></a>
        <a class="selem"></a>
        <a class="selem"></a>
        <a class="selem"></a>
        </div>



<br/><br/><br/>

<div wid="2" class="sharer" style="float:right;margin-top: 3px;">
Share this post1    </div>
<div class="sconta" id="sconta2">
        <a class="selem" id="selem2"   href="http://www.facebook.com/sharer/sharer.php?u=http://www.ourcampus.co/post.php?id=2">Fb</a>
        <a class="selem"></a>
        <a class="selem"></a>
        <a class="selem"></a>
        <a class="selem"></a>
        </div>

jQuery-
 $(document).ready(function(){ 
    $(".sharer").click(function(){
    var ID =  $(this).attr('wid');
    $("#sconta"+ID).show(); 
    $(this).hide(); 
    }) 
    }) ;

CSS

.sconta{
        display:none;
        width: auto;
        float: right;   
    }

    .selem{
        display:block;
        height:32px;
        margin-right:2px;
        width:32px; 
        background:red;
        float:left;
    }

人口统计学 http://jsfiddle.net/o8r6h788/4/

Jquery id无法正常工作

3 个答案: