Question

我有以下问题。我有一个.one("click")函数，它有一个自我引发的变量，我需要添加一个函数，当变量到达想要的点时触发。我的意思是，在下面的代码中，我需要在Result变量变为9之后使用最后'last'img与'home'img的connect函数，这将在它们之间产生一条线，我将有一个完整的圈。请阅读代码并尝试点击所有图片，以便您了解我需要实现的目标。提前致谢。这是代码：

$(document).ready(function() {
    var Result = 0;

    $('img').one("click", function(){
        if( $('img.home').length == 0 ){
                        $(this).addClass('home');
        }

        if(Result <= 9){
            var $elem2 = $('span.last');
            var $elem1 = $(this).parent();
            $(this).toggleClass('selected');

            if ($elem2.length > 0) {    
                connect($elem1[0], $elem2[0], "#0F0", 5);
            } 
            else { 
                $elem1.addClass('last');
            }

            $('span').removeClass('last');
            $elem1.addClass('last');
            Result++;
        }
    });

});


function connect(div1, div2, color, thickness) {
    var off1 = getOffset(div1);
    var off2 = getOffset(div2);
            // bottom right
    var x1 = off1.left + off1.width;
    var y1 = off1.top + off1.height;
            // top right
    var x2 = off2.left + off2.width;
    var y2 = off2.top;
            // distance
    var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));
        distanz += parseInt(length);
            // center
    var cx = ((x1 + x2) / 2) - (length / 2);
    var cy = ((y1 + y2) / 2) - (thickness / 2);
            // angle
    var angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI);
            // make hr
    var htmlLine = "<div style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' />";
htmlLine = $(htmlLine);

    $('body').append(htmlLine);
    return htmlLine;
}


function getOffset( el ) {
    var x = 0;
    var y = 0;
    var w = el.offsetWidth|0;
    var h = el.offsetHeight|0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
            x += el.offsetLeft - el.scrollLeft;
            y += el.offsetTop - el.scrollTop;
            el = el.offsetParent;
        }
    return { top: y, left: x, width: w, height: h };
}

jsfiddle：http://jsfiddle.net/CDQhX/4/

我想在完成最后一行并且结果为9之后执行connect（home和span图像）。这不能在click函数内完成，因为我没有点击任何地方来触发它。我的知识不让我解决问题。所以我感谢任何帮助。我很高兴收到答案。

Answer 1

首先，你的意思是你没有点击任何地方，你想要在点击最后一个img时执行它。你不能只是点击它来检查img是否是最后一个，并执行你需要的东西吗？

另一方面，您可以尝试setTimeout和setInterval，如下所述：http://www.w3.org/TR/2011/WD-html5-20110525/timers.html

所以，例如，你可以这样做：

setInterval( function() {
  //do your thing
}, 500);

每500毫秒执行一次该函数，因此您可以使用它来定期检查变量。

在单击功能中添加非单击功能

1 个答案: