Utwórz funkcję javascript wielokrotnego użytku - javascript, jquery

W tej chwili używam poniższej funkcji do wykonania prostego slajdu ...

function jeans(jean, links) {

$(links).hide();

$(jean).hover(

function() {
$(links).show("slow");
},

function() {
$(links).hide("slow");
});}

I nazywając to w razie potrzeby za pomocą ...

jeans("#red-jeans", "#red-jeans ul");
jeans("#blue-jeans", "#blue-jeans ul");
jeans("#yellow-jeans", "#yellow-jeans ul");

„Chciałbym móc to zrobić, dołączając klasę do rodzica„ # red-jeans ”.

Coś mi się podoba

function jeans(selector) {

$(selector "ul").hide();

$(selector).hover(

function() {
$(selector "ul").show("slow");
},

function() {
$(selector "ul").hide("slow");
});}

... ale moja składnia jest okropna!

Gdyby ktoś mógł skierować mnie w dobrym kierunku, byłbym bardzo wdzięczny!

---

Problem polega teraz na tym, że slajd działa na każdym elemencie, w którym mam klasę. Czy ktoś może polecić poprawkę, która aktywowałaby go tylko przy bieżącym najechaniu kursorem? Zakładam, że (to) jest gdzieś potrzebne ...

Dzięki!

Odpowiedzi:

1 dla odpowiedzi № 1

Istnieje kilka sposobów na osiągnięcie tego w czysty sposób:

$(selector).find("ul")
$(selector + " ul")
$("ul", selector)

są równoważne.

Ogólnie polecam buforowanie selektorów, jeśli używasz ich częściej, ponieważ dzwonisz $() z selektorem w środku może być dość kosztowny. W ten sposób masz lepszą wydajność i mniej problemów podczas refaktoryzacji.
Aby uzależnić slajdy od bieżącego najechania kursorem, użyj $(this) zamiast generała selector.

function(selector){

var $element = $("ul", selector);

$element.hide();

$(selector).hover(
function() {
$(this).find("ul").show("slow");
},
function() {
$(this).find("ul").hide("slow");
});

}

---

3 dla odpowiedzi № 2

To:

$(selector "ul").hide();

powinno być

$("ul", selector).hide();

Wraz ze wszystkimi innymi podobnymi miejscami. To robi ul elementy wewnątrz selector

---

1 dla odpowiedzi nr 3

Już odpowiedziałem, ale jest to dobry sposób na zrobienie tego samego. Możesz stworzyć własną wtyczkę jQuery w ten sposób ...

$.fn.jeans = function() {
$(this).find("ul").hide();
$(this).hover(
function() {
$(this).find("ul").show("slow");
},
function() {
$(this).find("ul").hide("slow");
}
);
}

Wywołujesz go, wybierając elementy do zastosowania i używając go jak zwykłej funkcji jQuery ...

$("#red-jeans, #blue-jeans, #yellow-jeans").jeans();

Tylko na przyszłość;)

---

0 dla odpowiedzi nr 4

Wystarczy dołączyć ciąg: $(selector + " ul").hide("slow");

---

0 dla odpowiedzi № 5

możesz spróbować zaktualizować JavaScript function jak poniżej:

function jeans(selector) {

// you will have to use "find" and it wil only be for the first "ul" as well
$(selector).find("ul:first").hide();

$(selector).hover(

function() {
$(selector).find("ul:first").show("slow");
},

function() {
$(selector).find("ul:first").hide("slow");
});
}

A potem nazwij to tak ...

jeans("#red-jeans");
jeans("#blue-jeans");
jeans("#yellow-jeans");

Mam nadzieję, że to pomoże

---