JQuery проблемы

Question

Ниже я представляю вам некоторый код, который был полностью забит мной.

$(".gig").hover(function() {
    var id = $(this).attr("id");
    var time = $(this).attr("title");

    function () {
        if (time > 0)
        {
            var answer = $('<div class="roll">Are you attending? <a href="' + id + '">Yes</a></div>').hide();

        }
        else
        {
            var answer = $('<div class="roll">Did you attend?<a href="' + id + '">Yes</a> </div>').hide();              
        }

        answer.appendTo($(this)).fadeIn("fast");
    } 
    function () {
        $(this).find("div:last").fadeOut("fast", function() {
            $(this).remove()
        });
    }
});

Я знаю, это ужасно. Это в основном похоже на псевдокод сейчас. Может ли кто-нибудь помочь мне переписать мой беспорядок в реально работающий код?

В основном для каждого класса с именем div он должен добавить переменную answer в конец этого div, а при наведении мыши удалить переменную answer. Переменная time будет извлечена из заголовка div ролловера, и, таким образом, повлияет на то, что показано в добавляемом новом div. Идентификатор .gig должен быть просто передан в URL.

Функции добавления / удаления при наведении ответа работают самостоятельно, но я не могу поместить их в новую функцию с переменными if и new.

Большое спасибо.

Answer 1

Эта часть выскочила на меня: . id . - Вы не конвертируете строки с . в Javascript, вы используете +.

Тот факт, что вы разместили этот код с этой ошибкой, говорит о том, что A) у вас есть редактор, лишенный ошибок, и / или B) вы не отлаживаете свой Javascript с помощью инструмента, подобного Firebug . Вы, вероятно, должны получить на это. :)

Вы также пытаетесь неправильно использовать два аргумента функции hover, поскольку вы помещаете весь свой код в одну огромную функцию, а затем просто объявляете две анонимные функции (я даже не уверен, что синтаксис работает ??)

Ниже приведена правильная ( относительно синтаксиса и того, что я считаю логика) версия вашего кода. Дай вихрь.

$(".gig").hover(function () {
    var id = $(this).attr("id");
    if (time > 0) {
        var answer = $('<div class="roll">Are you attending? <a href="' + id + '">Yes</a></div>').hide();
    } else {
        var answer = $('<div class="roll">Did you attend?<a href="' + id + '">Yes</a> </div>').hide();                          
    }
    answer.appendTo($(this)).fadeIn("fast");
}, function () {
    $(this).find("div:last").fadeOut("fast", function() {
        $(this).remove()
    });
});

Answer 2

Лично я бы инициализировал его поDOMReady для каждого элемента, а не при наведении. Но вы можете сделать это, как вы хотите. Вот что я сделаю.

$(function() {
  $('.gig').each(function() {
    id = $(this).attr('id');
    time = $(this).attr('title');
    answer = '<div class="roll">' + 
      (time > 0 ? 'Are you attending?' : 'Did you attend?') +
      ' <a href="' . id .'">Yes</a></div>';
    $(this).append(answer);
  }).hover(
    function() { $('.roll', this).show('fast'); },
    function() { $('.roll', this).hide('fast'); }
  );
});

Answer 3

EDIT

Вы отредактировали свой вопрос. Я думаю, что это должно делать то, что вы хотите:

$(".gig").hover(function() {
    var $this = $(this);
    var id = $this.attr("id");
    var time = $this.attr("title");
    var a = $('<a />').text('Yes').attr('href', id);
    var div = ('<div />').addClass('roll');
    if(time > 0){
        div.text('Are you attending?');
    } else {
        div.text('Did you attend?');
    }
    var answer = div.append(a).hide();
    answer.appendTo( this ).fadeIn('fast');
}, function(){
    $(this).find("div.roll:last").fadeOut("fast", function() {
            $(this).remove()
    });
});

Вы можете улучшить его, используя некоторое кэширование для создания узла DOM, примерно так:

$(".gig").hover(function() {
    var $this = $(this);
    if(typeof $this.data('attendingLink') === 'undefined'){
        var id = $this.attr("id");
        var time = $this.attr("title");
        var a = $('<a />').text('Yes').attr('href', id);
        var div = ('<div />').addClass('roll');
        if(time > 0){
            div.text('Are you attending?');
        } else {
            div.text('Did you attend?');
        }
        var answer = div.append(a);
        $this.data('attendingLink', answer);
    } else {
        var answer = $this.data('attendingLink');
    }
    answer.hide();
    answer.appendTo( this ).fadeIn('fast');
}, function(){
    $(this).find("div.roll:last").fadeOut("fast", function() {
            $(this).remove()
    });
});

Это, однако, улучшит предварительную производительность только тогда, когда пользователь часто наводит курсор на элементы .gig.