Jquery идентификатор не работает должным образом

-2

Привет ПЕРЦЫ мой первый элемент DIV работает, когда я нажимаюJquery идентификатор не работает должным образом

, но когда я нажимаю на второй, то он не работает я невежественный, что происходит [Использовано нажмите() Fn и Отделите идентификаторы для конкретного сНу 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

источник

2015-03-10 Riya Roy

** Идентификатор элемента должен быть уникальным **, использование класса вместо ID группировать подобные элементы ... так 'sharer' должен быть класс –

http://jsfiddle.net/arunpjohny/o8r6h788/1/ –

@ArunPJohny спасибо –

Вы используете тот же идентификатор для обоих. Используйте другой идентификатор для обоих DIV. Идентификатор должен быть уникальным. Класс может быть таким же.

<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>

источник

2015-03-10 07:33:59 ketan

Попробуйте это ..

Добавить общий класс, как "тест"

Добавить динамический идентификатор, чтобы изменить ваш атр УЖР

<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/

источник

2015-03-10 07:41:12

У меня есть обновленный код –

Использование класса вместо 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/

источник

2015-03-10 08:16:03 WisdmLabs

Jquery идентификатор не работает должным образом

ответ

Смежные вопросы