Javascript/jQuery: Есть ли лучший способ сделать это в Javascript?

У меня есть этот код:Javascript/jQuery: Есть ли лучший способ сделать это в Javascript?

$(document).ready(function() { //Document Ready 

$(".examples .example1").click(function() { 

    $(".examples .example1 div").fadeToggle("slow"); 
    $(".examples .example1").toggleClass('focused'); 

}); 


$(".examples .example2").click(function() { 

    $(".examples .example2 div").fadeToggle("slow"); 
    $(".examples .example2").toggleClass('focused'); 

}); 


$(".examples .example3").click(function() { 

    $(".examples .example3 div").fadeToggle("slow"); 
    $(".examples .example3").toggleClass('focused'); 


}); 

}); // End

Это только в основном дублирует то же самое на 3 (только 2 в примере ниже) отличается элементы- Нажмите, Переключите DIV и переключения класса.

Working code here (Гадкий, а не как это представляется в сайт- отсутствуют другие CSS/меньше и изображения)

Это прекрасно работает, но (очень маленький) JS человек внутри меня говорит, что должно быть более чистый способ сделать то же самое? Кажется чересчур повторяющимся и уродливым.

Может ли кто-нибудь помочь в создании этого лучшего кода? (и, следовательно, я лучше кодер, если я узнаю)

источник

2013-06-17 harley_woop

Ваш пример показывает только один элемент с каждым классом 'examplesX'. Есть ли по одному для каждого? –

Как насчет: http://jsfiddle.net/5anxN/ – Ian

@CrazyTrain Нет, будет одно из каждого числа. –

Используйте общий класс для всех элементов. Вы можете использовать this для ссылки на элемент, на который был нажат.

$(".examples>span").click(function() { 
    $(this).toggleClass('focused').find("div").fadeToggle("slow");  
});

источник

2013-06-17 15:09:54 epascarello

Я не спускал вниз, но смотрю на вопрос: '$ (". Examples .example3 ")' действует на '$ (". Example .example2 div ")' (а не на '$ (". example3 div ")'). – bwoebi

@bwoebi: Я бы сказал, что это ошибка копирования при создании примера кода. –

@epascarello Я не спускал вниз, но я добавил другой класс - «NOTOGGLE», и он еще не переключился, когда я нажал на него? –

$(document).ready(function() { //Document Ready 
    $('.examples > span[class^="example"]').click(function() { 
     $(this).toggleClass('focused').children('div').fadeToggle('slow'); 
    }); 
}); // End

Это будет направлен на поверочный ребенок, если .examples с именем класса, который начинается с example. Он будет переключать класс focused на этот элемент, прежде чем переходить на поиск ребенка div и медленно переключать его.

Codepen ссылка: http://codepen.io/anon/pen/DBHFy

источник

2013-06-17 15:12:25

Javascript/jQuery: Есть ли лучший способ сделать это в Javascript?

ответ

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