jQuery parent() obrazu w tabeli

0

Witam.
Chciałbym zmienić kolor tła następnej komórki w której jest zdjęcia.

$("img.glowna_prod").mouseover(function() {
	$(this).animate({
		opacity: 0.4
	}, 400);
	
	$(this).parent("td").next().animate({
		opacity: 0.4,
		backgroundColor: "red"
	}, 400);
}).mouseout(function() {
	$(this).animate({
		opacity: 1
	}, 500);
});
	

$(this) jest to handler do zdjęcia na jakie najechaliśmy myszką.

<tr>
	<td><a href="index.html"><img border="0" class="glowna_prod" src="products_photo/syringe_pump.jpg"/></a></td>
	<td><a href="index.html"><img border="0" class="glowna_prod" src="products_photo/infusion_pump.jpg"/></a></td>
</tr>

Niestety nic się nie zmienia.

0

A czy <td> jest Twoim zdaniem rodzicem <img />? (Na wszelki wypadek podpowiem - nie, jest nim element <a>).

http://api.jquery.com/closest/

0

A jak teraz podświetlić td w następnym tr.

<tr>
	<td><a href="index.html"><img border="0" class="glowna_prod" src="products_photo/syringe_pump.jpg"/></a></td>
	<td><a href="index.html"><img border="0" class="glowna_prod" src="products_photo/infusion_pump.jpg"/></a></td>
</tr>
<tr>
	<td>Pompy infuzyjne strzykawkowe</td>
	<td>Pompy infuzyjne</td>
</tr>

Tak żeby podświetlić pierwszy td jak najedzie się na pierwsze zdjęcie i drugi jak na drugie ;)

Tak nie działało :)

$("img.glowna_prod").mouseover(function() {
	$(this).animate({
		opacity: 0.4
	}, 400);
	
	$(this).closest("td").next().next().animate({
		opacity: 0.4,
	}, 400);

Sorry za takie banalne pytania.

1

to już nie przejdzie bez sprawdzania, którym dzieckiem jest aktualne td:

$("img.glowna_prod").mouseover(function() {
    // animacja
    var td = $(this).closest('td'); // wybieramy sobie td do zmiennej
    var index = td.index(); // pobieramy którym dzieckiem elementu nadrzędnego jest to td (indeksowanie zaczyna się od zera!)

    $(td).parent().next().children('td:nth-child('+(index+1)+')').animate(/* ... */); // dochodzimy do tr, wybieramy następny tr, następnie wybieramy w nim dziecko o numerze (tutaj jest od 1)
  });
0

A czy wiecie może dlaczego to nie działa pod IE?

$("img.glowna_prod").mouseover(function() {
	$(this).animate({
		opacity: 0.4,
	}, 400);
	
	var td = $(this).closest('td'); // wybieramy sobie td do zmiennej
	var index = td.index(); // pobieramy którym dzieckiem elementu nadrzędnego jest to td (indeksowanie zaczyna się od zera!)
 
   			 $(td).parent().next().children('td:nth-child('+(index+1)+')').animate({
		color: "#00A0E3",
	}, 400);		
}).mouseout(function() {
	$(this).animate({
		opacity: 1,
	}, 500);
	
	
	var td = $(this).closest('td'); // wybieramy sobie td do zmiennej
	var index = td.index(); // pobieramy którym dzieckiem elementu nadrzędnego jest to td (indeksowanie zaczyna się od zera!)
 
   			 $(td).parent().next().children('td:nth-child('+(index+1)+')').animate({
		color: "black",
	}, 400);
});

http://mati1988k.phpnet.us/

Chodzi o obrazki w grupie Produkty.

1

Jakbyś nie ciął strony na tabelach to by tego całego tematu o wyszukiwaniu indeksu i "next" nie było ;)

Co do IE, spójrz tutaj:
user image
Widzisz to podkreślone na czerwono? IE tego nie poprawi, inne przeglądarki owszem.

1

@dzek69:
BTW: zostawienie przecinka na końcu inicjalizatora obiektu to NIE jest de facto błąd. Specyfikacja ECMA-262 (definiująca formalnie JavaScript) jak najbardziej dopuszcza taką konstrukcję i przeglądarki nie muszą niczego "poprawiać". Umożliwia to poniższa produkcja:

ObjectLiteral :
  { }
  { PropertyNameAndValueList }
  { PropertyNameAndValueList , } // <-- zwróć uwagę na przecinek

PropertyNameAndValueList :
  ...

W języku JavaScript nie ma też "automatycznego usuwania przecinków" ;-) (jest tylko automatyczne wstawianie średników, ale to inna bajka).

W IE to nie działa, bo microsoftowa implementacja tego samego języka, zwana u nich JScriptem, najwyraźniej na ten przecinek nie pozwala. Ale to nie tak, że IE jest jakieś surowe czy nie dopuszcza do pewnych błędów. Po prostu, jak to dość często bywa, jest głupkowate.

Swoją drogą, z jakiego edytora/IDE korzystasz? Moje IDE nie podkreśla tego "błędu" (nie-błędu) z przecinkiem i być może przez to jest to najczęstszy błąd składni (błąd, bo ja nie chcę mieć wiszących przecinków, mimo iż są dozwolone), który generuję już po CTRL+S i widzę dopiero podczas testowania IE.

1 użytkowników online, w tym zalogowanych: 0, gości: 1