Naprawiłem mój kod, ale mam zachowanie glebowe. W szczególności, gdy mysz nie jest już dłużej na "TD.comPonent", przyciski powinny być ukryte, ale po przeniesie myszy naprawdę szybko nad różnymi "TD.comPonent, niektóre z tych elementów nadal pokazują przyciski. Jakieś myśli, jak mogłem to naprawić?

Dzięki.

Kod poniżej:

$(function() {

var $newButton = $('<button class = "new"><img class = icon src = "images/new.png" >new</img></button>');
var $deleteButton = $('<button class = "delete"><img class = icon src = "images/delete.png" >delete</img></button>');
var $saveButton = $('<button id = "save">Save</button>');

for (i = 42; i > 0; i--) {
    $table.append('<tr><td class = "number">' + i + 
        '</td><td class = "component"></td></tr>');

}

//appends to all 'td.component'
$('td.component').append($newButton).append($deleteButton);
//hides all buttons
$('button.new').hide();
$('button.delete').hide();


$('td.component').mouseover(function(e) {
    $(this).find('button.new').show();
    $(this).find('button.delete').show();
});


$('td.component').mouseout(function(e) {
    $(this).find('button.new').hide();
    $(this).find('button.delete').hide();
});

$('button.new').mouseout(function(e) {
    e.stopPropagation();
});

$('button.delete').mouseout(function(e) {
    e.stopPropagation();
});

});

-4
user3761743 13 sierpień 2014, 01:57

2 odpowiedzi

Najlepsza odpowiedź

Możesz użyć find:

$('td.component').mouseover(function(e) {

    $(this).find('button.new').show();
    $(this).find('button.delete').show();

});

Oto jsfiddle.

Prawdopodobnie chcesz ukryć przyciski, gdy mysz pozostawia.

Ponieważ @elzi wskazał, jeśli chcesz je pokazać / ukryć je na HOVER, najlepiej wykorzystujesz CSS Hover:

td.component button {
    display: none;
}

td.component:hover button {
    display: inline;  
}

(Zajęcia ignorowane dla prostoty)

Zaktualizowano jsfiddle.

2
go-oleg 12 sierpień 2014, 23:14

Możesz użyć this, aby wykonać zestaw funkcji na tym elemencie.

$('td.component').mouseover(function(e) {
   $(this).find('button.new').show();
   $(this).find('button.delete').show();
});

Znajdziełoby to przyciski wewnątrz tego konkretnego elementu.

1
Afzaal Ahmad Zeeshan 12 sierpień 2014, 22:00