мышкой вводите и оставляете показывать и скрывать но переопределять при нажатии - PullRequest
Новая
       14

мышкой вводите и оставляете показывать и скрывать но переопределять при нажатии

0 голосов
/ 10 октября 2011

У меня есть скрипт jquery, где, если пользователь mouseenter, элемент - .show (), а mouseleave, элемент - .hide () Но что, если у вас есть пользовательский щелчок, и вы хотите показать элемент, даже если мышь уходит? Как бы вы переопределили отпуск мышью, когда пользователь щелкает?

Мой сценарий выглядит примерно так 

    $('.block').live("mouseenter",function(){
                var id= $(this).attr('id');
                $('#'+id).show();
                $(this).click(function(){
                      //show? is this how it works? not sure where click should go.
        });

            }).live("mouseleave",function(){
            var id= $(this).attr('id');
            $('#'+id).hide();

        });

Как мне работать с кликом?

Спасибо!

Ответы [ 3 ]

1 голос
/ 10 октября 2011

Вы можете использовать .unbind, чтобы удалить обработчики событий для "mouseleave".Кроме того, использование $ (this) будет ссылаться на элемент, вызвавший событие, независимо от того, подключен ли обработчик события к имени класса, поэтому вам не нужен код, который выбирает идентификатор. 

$('.block').live("mouseenter",function(){

    $(this.)show();

}).live("mouseleave",function(){

    $(this).hide();

}).live("click", function(){

    this.unbind("mouseleave");

});
1 голос
/ 10 октября 2011

Вы можете отменить привязку обработчика события mouseleave, когда пользователь щелкает div 

$(function() {

    $('.block').live("mouseenter", function() {
        var id = $(this).attr('id');
        $('#' + id).show();
        $(this).click(function() {
            //show? is this how it works? not sure where click should go.
        });

    }).live("mouseleave", function() {
        var id = $(this).attr('id');
        $('#' + id).hide();

    }).live("click",function(){
         $(this).unbind("mouseleave"); 
         $(this).removeClass('block');  //this was added
    });
});

Попробуйте даже попробовать использовать $('.block').hover(function(){},function(){}) вместо индивидуальной обработки событий mouseover и mouseleave. Также еслиможно использовать делегирование вместо live.Но это просто мнение, не связанное с вашим вопросом.

Редактировать: с делегатом.Обратите внимание, что для работы div.blocks должен иметь вид 

<div id="container">
<div class="block">
<div class="block">
</div>



$('#container').delegate('.block', 'mouseenter', function() {
    var id = $(this).attr('id');
    $('.msg').html('I entered :' + id);

});
$('#container').delegate('.block', 'mouseleave', function() {
    var id = $(this).attr('id');
    $('.msg').html('I came out of :' + id);

});
$('#container').delegate('.block', 'click', function() {
    var id = $(this).attr('id');
    $('.msg').html('I entered and clicked :' + id);
    $(this).unbind("mouseleave");
    $(this).removeClass('block');
});

Также вам необходимо удалить блок класса из div, по которому щелкают, чтобы противостоять эффекту .live или * 1014.*

0 голосов
/ 10 октября 2011

Я думаю, что немного лучше использовать классы для представления состояния, чтобы вы могли соответствующим образом стилизовать элементы.Хотя это делает запрос к домену немного больше, это, вероятно, лучше, чем добавлять и удалять события все время ... Это должно сделать это: 

    $('.link').live({
        mouseenter: function(){
            if(!$('.link.locked').length)
            {
                $(this).show();
            }
        }, 
        mouseleave: function(){
            if(!$(this).hasClass('locked'))
            {
                $(this).hide();
            }
        },
        click: function() {
            $(this).toggleClass('locked');
        }
    });

Кстати, это следующее 

$(this).show();

Это то же самое, что и 

var id = $(this).attr('id');
$('#'+id).show();

Вам удалось сделать дополнительный шаг ...?Если вы не скрываете / не показываете this, то это, вероятно, неправильный подход, если вы скрываете / показываете другой элемент, убедитесь, что вы изменили код соответствующим образом.

...