Как я могу Скрыть / Показать диапазон, когда все они имеют один и тот же класс?

Question

У меня есть этот HTML-код:

<p>Hello <span class="hide" style="display:none">there</span> jquery</p>
<button class="toggle">Toggle</button>
<p>Hello <span class="hide" style="display:none">You</span> jquery</p>
<button class="toggle">Toggle</button>

С помощью этого jQuery:

$('.toggle').toggle(
    function() {
        $('.hide').show("slow");},
    function() {    
        $('.hide').hide("slow");}
);

Теперь, как вы видите, обе кнопки имеют один и тот же класс, и оба диапазона имеют один и тот же класс. Здесь я пытаюсь добиться того, чтобы при нажатии на одну из них она пряталась / показывала промежуток над ней.

У меня все работает, как сейчас на этом jsFiddle

Есть идеи?

Заранее спасибо

Federico

Answer 1

Возможно

$('button.toggle').click(function() {
    $(this).prev('span').toggle();
});

Answer 2

Это должно сработать:

$('.toggle').toggle(
    function() {
        $(this).prev().find('.hide').show("slow");},
    function() {    
        $(this).prev().find('.hide').hide("slow");}
);

Answer 3

Спасибо всем за ответы, я просто нашел другой способ, который был намного лучше для того, что мне было нужно! :)

Этот код, который я нашел, может пригодиться кому-то еще.

// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// Latest version @ http://andylangton.co.uk/jquery-show-hide

// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {

// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='Show';
var hideText='Hide';

// initialise the visibility check
var is_visible = false;

// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append(' (<a href="#" class="toggleLink">'+showText+'</a>)');

// hide all of the elements with a class of 'toggle'
$('.toggle').hide();

// capture clicks on the toggle links
$('a.toggleLink').click(function() {

// switch visibility
is_visible = !is_visible;

// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showText : hideText);

// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');

// return false so any link destination is not followed
return false;

});
});

Тогда просто используйте HTML в этой форме

<a href="#" class="toggleLink">Toggle</a>
<span class="toggle" >there</span>
<a href="#" class="toggleLink">Toggle</a>
<span class="toggle" >You</span>

Добавление переключателя класса к любому span, div или тегу, который вы хотите скрыть / показать, и добавление класса toggleLink к родительскому элементу

Вы можете увидеть, как это работает здесь jsFiddle

Или на сайте автора

Answer 4

$('.toggle').toggle(
    function() {
        $(this).prev().show('slow');
    },
    function() {
        $(this).prev().hide('slow');
    }
);

Answer 5

Установите для атрибута id диапазона уникальное значение, затем используйте $('#thatid') для ссылки на него (заменив thatid на установленный вами идентификатор).