jquery: закладка Функция абзаца, эффективна ли проверка класса для каждого параграфа? Есть ли способ лучше? - PullRequest
Новая
       1

jquery: закладка Функция абзаца, эффективна ли проверка класса для каждого параграфа? Есть ли способ лучше?

0 голосов
/ 01 марта 2011

Я создаю на своем сайте функцию, которая позволяет людям размещать закладки на абзаце при просмотре статьи, поэтому, если они захотят вернуться позже, они будут знать, где они остановились.

Когда пользователь нажимает «РАЗМЕСТИТЬ ЗАКЛАДКУ», он добавляет класс .placing к этой ссылке. Когда пользователь наводит курсор мыши на абзац, сценарий проверяет, имеет ли ссылка класс .placing, если он есть, то он исчезает в div при наведении курсора, который говорит «добавить закладку в этот абзац», при наведении курсора на него исчезает этот div. из.

Прямо сейчас мой код помещен в $('P').click(function..., который находится внутри функции наведения, поэтому ссылки на странице не запускают анимацию при наведении. Поэтому ссылки внутри абзацев не будут анимироваться при наведении курсора, потому что при наведении курсора на абзац выполняется проверка класса .placing и выполняется функция наведения на закладки.

Как заставить анимацию при наведении снова работать со ссылками, существующими в абзацах? и это лучший способ сделать это? проверять класс .placing каждый раз, когда я наводю курсор на абзац? Должен быть лучший способ сделать это, например, переключатель, который позволяет функции зависания абзаца с закладкой работать только при включенном переключателе, а не проверять при каждом наведении параграфа. 

    $('#placeBookmark').click(function () {
            $(this).toggleClass('placing')

    })

    $('p').hoverIntent(function () {
        // HOVER ON
        if ($('#placeBookmark').hasClass('placing')) {
            $(this).append('<span id="bookmarkThis">BOOKMARK THIS</span>')
            $(this).find('#bookmarkThis').stop().animate({opacity: 1.0}, 400) 

  $('p').click(function (e) {
        var newbm = $('#bookmark').offset().top
        var offset = $(this).offset();
        var top = offset.top
        var phrases = ["SUCCESS", "SWEEEEEEET MANNN", "AWESOMELY AWESOME", "NEAT-OH!", "EXCELLENT, BOOKMARK PLACED", "BOOKMARK SAVED", "YOU DID IT KID!", "WOOOHOOO", "YOU ARE WONDERFUL"];

        if ($('#placeBookmark').hasClass('placing')) {
           //$('#placeBookmark').trigger('click')
           $('#placeBookmark').removeClass('placing')

            if (top == newbm) {
               // bookmarkColorDelay = 2000
                $('#bookmarkThis').html('<span>ITS ALREADY BOOKMARKED</span> SILLY PERSON').delay(2000).fadeOut(400, function () {
                    $(this).remove()//html('BOOKMARK THIS')
                })
            } else {
               // bookmarkColorDelay = 1000
                var selectedPhrase = phrases[Math.floor(Math.random() * phrases.length)];
                $('#bookmarkThis').html(selectedPhrase).delay(1000).fadeOut(400, function () {
                    $(this).remove()//html('BOOKMARK THIS')
                })
                $('#bookmark').fadeOut(300, function () {
                    $(this).css({
                        left: offset.left - 30,
                        top: top
                    }).fadeIn(300);
                })
            }
            $(this).stop().delay(bookmarkColorDelay).animate({
                color: "#333",
                backgroundColor: "#fff"
            }, 200)
        }
    });

        } 
    }, function () {
        // HOVER OFF
        if ($('#placeBookmark').hasClass('placing')) {
            $(this).find('#bookmarkThis').stop().fadeOut(400, function(){
                $(this).remove()
            })
        }
    });

Ответы [ 2 ]

0 голосов
/ 01 марта 2011

Я бы взял код Андреа и слегка его оптимизировал бы как 

$('p.placing').live('click', function(event) {
    // Whatever you want to do
});

$('p.placing').live('hover', function(event) {
    // Whatever you want to do
});
0 голосов
/ 01 марта 2011

Используйте селектор класса! : -) 

$('.placing').live('click', function(event) {
    // Whatever you want to do
});

$('.placing').live('hover', function(event) {
    // Whatever you want to do
});

Это будет работать, даже если класс .placing будет добавлен позже.

...