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的末尾，并在mouseout上删除变量answer。变量time将从rollover div的标题中获取，从而影响添加的新div中显示的内容。 .gig的id应该简单地传递给url。

悬停答案添加/删除功能可以自行运行，但是我无法使用if和new变量将它们放入新函数中。

非常感谢你。

Answer 1

修改

您编辑了自己的问题。我认为这应该做你想要的：

$(".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元素上时，这只能提高性能。

Answer 2

这一部分向我跳了出来：. id . - 您没有在Javascript中使用.汇总字符串，而是使用+。

您发布此错误的事实告诉我A）您有一个乏善可陈的编辑器，和/或B）您没有使用像Firebug这样的工具调试您的Javascript。你可能应该这样做。：）

您还试图错误地使用悬停的两个函数参数，因为您将所有代码放在一个庞大的函数中然后只声明两个匿名函数（我甚至不确定语法是否有效？）

以下是正确的（至于语法以及我认为逻辑是什么）版本的代码。给它一个旋转。

$(".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 3

就我个人而言，我会在每个元素的onDOMReady上初始化它，而不是在悬停时。但你可以按照自己的意愿去做。这就是我要做的事。

$(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'); }
  );
});

jQuery问题

3 个答案: