selektor jquery pobiera element z klasą wewnątrz div - jquery

Mam do czynienia z selektorem jquery. Mam część html, która (uproszczona) wygląda

<div class="tile">
message
<a href="#" class="ui-icon ui-icon-pencil">link1</a>
<a href="#" class="ui-icon ui-icon-close">linkb</a>
</div>

ten div jest powtarzany razy severl na stronie

i we względnym javascriptu chcę dodać kod, aby pokazać lub ukryć 2 linki, gdy użytkownik przesunie mysz nad div. Napisałem coś takiego

$(function () {
$(".tile").bind("mouseover", function () {
$("this .ui-icon").show();
});
$(".tile").bind("mouseout", function () {
$("this .ui-icon").hide();
});
});

ale to nie działa. Czy ktoś może mi tutaj pomóc?

Odpowiedzi:

3 dla odpowiedzi № 1

Kilka opcji:

Minimalna poprawka

Użyłeś "tego" w selektorze, a to, co chcesz zrobić, to użyć $(this) aby uzyskać obiekt jQuery dla rzeczywistego kafla przeniesionego przez mysz, a następnie użyć find znaleźć elementy potomne. Lepiej się też używasz mouseenter i mouseleave niż mouseover i mouseout:

$(function () {
$(".tileAgenzia").bind("mouseenter", function () {
$(this).find(".ui-icon").show();
});
$(".tileAgenzia").bind("mouseleave", function () {
$(this).find(".ui-icon").hide();
});
});

(Powód, dla którego "jesteś lepszy", jest taki mouseover i mouseout bańkai tak jak mysz porusza się po elementach potomnych elementów "tileAgenzia", ​​zobaczysz wiadomości od tych potomków).

Użyj CSS (jeśli możesz)

Ale warto zauważyć, że dopóki nie trzeba wspierać IE6 i IE7 (i niektórych osób), można to zrobić wyłącznie za pomocą CSS, bez JavaScriptu:

.tileAgenzia .ui-icon {
display: none;
}
.tileAgenzia:hover .ui-icon {
display: inline;
}

Kiedy mysz unosi się nad dowolnym elementem z klasą "tileAgenzia", ​​jego potomne elementy z klasą "ui-icon" będą widoczne; kiedy mysz się na nim nie unosi, nie wygrali.

Bardziej zwięzłe jQuery

Jeśli chcesz trzymać się rozwiązania JavaScript, możesz użyć hover funkcja, która jest (jeśli przekażesz dwie funkcje) tylko skrótem do podpięcia mouseenter i mouseleave:

$(function () {
$(".tileAgenzia").hover(
// Called on mouseenter
function () {
$(this).find(".ui-icon").show();
},
// Called on mouseleave
function () {
$(this).find(".ui-icon").hide();
}
);
});

---

2 dla odpowiedzi nr 2

Próbować: $( this ).find ( ".ui icon" ).show()

---

2 dla odpowiedzi nr 3

Myślę, że możesz to znaczyć:

$(this).find(".ui-icon")

---

2 dla odpowiedzi № 4

Wierzę, że chcesz zmienić:

$("this .ui-icon")

do

$(this).find(".ui-icon")

---

1 dla odpowiedzi nr 5

Istnieje kilka sposobów, aby zmienić wybór jQuery na bieżące poddrzewo. To jest jeden przy użyciu .find() metoda.

$(function () {
$(".tileAgenzia").bind("mouseover", function () {
$(this).find(".ui-icon").show();
});
$(".tileAgenzia").bind("mouseout", function () {
$(this).find(".ui-icon").hide();
});
});

Mogę zasugerować to jako prostszą alternatywę:

$(function () {
$(".tileAgenzia").hover(function () {
$(this).find(".ui-icon").toggle();
});
});

---

1 dla odpowiedzi № 6

this w ciągu znaków nie jest taka sama jak zmienna this. Zawiń go w jQuery i użyj find.

$(function () {
$(".tileAgenzia").bind("mouseover", function () {
$(this).find(".ui-icon").show();
});
$(".tileAgenzia").bind("mouseout", function () {
$(this).find(".ui-icon").hide();
});
});

---

1 dla odpowiedzi № 7

Ach, "to" nie powinno być wewnątrz apostrofów .Jeśli masz załadowany jQuery, zrobiłbym to w sposób jQuery:

$(".tile").hover(function(){
$(this).children(".ui-icon").show();
}, function(){
$(this).children(".ui-icon").hide();
});

---

1 dla odpowiedzi № 8

Aby ograniczyć selektor do elementu nadrzędnego, użyj:

$(this).find(".ui-icon")

Lub:

$(".ui-icon", this)

---

0 dla odpowiedzi № 9

$(function () {
$(".tileAgenzia").bind("mouseover", function () {
$(this).find(".ui-icon").show();
});
$(".tileAgenzia").bind("mouseout", function () {
$(this).find(".ui-icon").hide();
});
});

---

0 dla odpowiedzi № 10

$(function () {
$(".tileAgenzia").bind("mouseover", function () {
$(this).find(".ui-icon").show();
});
$(".tileAgenzia").bind("mouseout", function () {
$(this).find(".ui-icon").show();
});
});

---