Когда я нажимаю на свой div, я не хочу, чтобы он выполнял все div с тем же классом?

Question

Первоначально, когда я нажимал на div, заголовок загорается, но он затрагивал все остальные div с тем же классом. Я просто хочу, чтобы он воздействовал на div, на который нажимали. Поэтому я попробовал этот вариант ниже, но он не работал вообще! Любая помощь будет оценена по достоинству. Спасибо!

$(document).ready(function() { 
    $(".bubble").click(function() { 
     $(this).find('.slide-up').slideToggle(1000);    
    }); 

}); 

<div class="property"> 
<div class="left-column">  
    <img src="<?php bloginfo('template_directory'); ?>/images/test-image.jpg" width="670px" height="450px" />  
    <div class="bubble"></div>  
    <div class="slide-up"><h1>CHARM? LOCATION? AWESOME? CHECK, CHECK AND CHECK</h1></div> 
</div> 

Answer 1

Try:

$(document).ready(function() { 
    $(".bubble").click(function() { 
     $(this).next('.slide-up').slideToggle(1000);    
    }); 

}); 

Answer 2

Используйте событие, чтобы получить тот, который вы хотите.

$(".bubble").click(function(e) { 
    $(e.target).find('.slide-up').slideToggle(1000);    
}); 

Answer 3

Вы должны использовать .nextв качестве slide-up DIV находится рядом с bubble не внутри него

$(".bubble").click(function() { 
     $(this).next('.slide-up').slideToggle(1000);    
}); 

Answer 4

Если у вас есть много '.bubble' элементы; $('.bubbles') возвращает массив элементов, который при запуске события щелчка будет выполняться над всеми пузырьками.

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

$(".bubble").each(function(){ 
    $(this).click(function() { 
     $(this).find('.slide-up').slideToggle(1000);    
    }) 
}); 

Я создал рабочий пример для вас здесь - http://jsfiddle.net/CGWGreen/acGLX/. Cheers GW