jquery.show() для нескольких целей

У меня есть несколько ссылок (15), а также 15 DIV с именем и изображениями.jquery.show() для нескольких целей

На pageload Я не скрываю все изображения, и всякий раз, когда я нажимаю на ссылку имени или на имя div, он откроется. Мне удалось сделать это, нажав на имя div, но не со ссылками, поскольку их несколько с разной целью.

<ul> 
<li><a href="#">Donald</a></li> 
<li><a href="#">Mickey</a></li> 
(many more) 
</ul> 

<div class="box"> 
<div id="name">Donald</div> 
<div id="name-image"> 
    <img src="..."> 
</div> 
</div> 
<div class="box"> 
<div id="name">Mickey</div> 
<div id="name-image"> 
    <img src="..."> 
</div> 
</div> 
(many more) 

$(document).ready(function() { 
$('#name-image').hide(); 
$(function() { 
    $('#name').click(function() { 
    $(this).siblings('#name-image').slideToggle('fast') 
    }) 
}) 
});

источник

2013-12-16 Th3Alchemist

ID с косяк быть одна и та же. Они должны быть уникальными.

Используйте классы вместо этого.

Try:

HTML:

<div class="box"> 
    <div class="name">Donald</div> 
    <div class="name-image"> 
     <img src="..."> 
    </div> 
</div>

JS:

$('.name-image').hide();  
$('.name').click(function() { 
    $(this).closest('.box').find('.name-image').slideToggle('fast'); 
});

DEMO here.

источник

2013-12-16 09:06:46 Hiral

Спасибо, но тогда как я делаю каждый тэг целевого diffrent .name-image, чтобы показать? – Th3Alchemist

@ Th3Alchemist вы хотите что-то вроде [этого] (http://jsfiddle.net/vdQw4/2/) ?? – Hiral

Я пытался что-то вроде этого: http://jsfiddle.net/vdQw4/3/ – Th3Alchemist

первого идентификатор элемент должен быть уникальным, поэтому использовать значение класса для группы аналогичных элементов

<div class="box"> 
<div class="name">Donald</div> 
<div class="name-image"> 
    <img src="..."> 
</div> 
</div> 
<div class="box"> 
<div class="name">Mickey</div> 
<div class="name-image"> 
    <img src="..."> 
</div> 
</div>

затем

jQuery(function ($) { 
    $('.name-image').hide(); 
    $('.name').click(function() { 
     $(this).next().slideToggle('fast') 
    }) 
});

Демонстрация: Fiddle

источник

2013-12-16 09:05:04

Спасибо, но тогда, как я делаю каждую цель тегов diffrent .name-изображение для показа? – Th3Alchemist

@ Th3Alchemist при условии, что порядок элементов один и тот же http://jsfiddle.net/arunpjohny/Lzmy5/3/ –

Я предлагаю вам изменить свое "имя" и "имя-образ" от ID к class.

, если вы хотите, чтобы каждый <a> целевого тега другого .name-изображение, чтобы показать, вы можете использовать атрибут href в вашем <a> тега. Чтобы сделать это, вы можете дать цель divid так:

<ul> 
<li><a href="#1">Donald</a></li> 
<li><a href="#2">Mickey</a></li> 
</ul> 

<div class="box"> 
<div class="name">Donald</div> 
<div class="name-image" id="1"> 
    <img src="..." /> 
</div> 
</div> 
<div class="box"> 
<div class="name">Mickey</div> 
<div class="name-image" id="2"> 
    <img src="..." /> 
</div> 
</div>

тогда JS будет как:

$(document).ready(function() { 
$('.name-image').hide(); 

$('ul li a').click(function(event) { 
    var imgID = $(this).attr('href'); 
    $(imgID).slideToggle('fast'); 
}); 

$('.name').click(function() { 
    $(this).next().slideToggle('fast'); 
}); 
});

Demo here

источник

2013-12-16 09:42:05 Litash

jquery.show() для нескольких целей

ответ

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