在某一點停止功能Javascript

我求救。在下面的代碼中，當選擇兩個對象時出現一條線。我需要一個函數，只要我們有一個完整的循環，就會停止整個過程。我的意思是，當我們從一個對象開始，經歷所有這些對象，並且一旦我們回到對象上並且它成爲一行的結尾，整個事情就會凍結並出現文本。我是一名新秀，我真的無法靠自己做到。非常感謝。在某一點停止功能Javascript

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<style type="text/css"> 
    img { 
     padding: 1px; 
     margin: 2px; 
     float: left; 
     background-color: #99BC99 
    } 
    img.selected { 
     padding: 2px; 
     margin: 4px;   
     background-color: #E13300 
    } 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 

$(document).ready(function() { 
    $('img').click(function(){ 
     var $elem1 = $(this).parent(); 
     var $elem2 = $('span.last'); 
     $(this).toggleClass('selected'); 
     if ($elem2.length > 0) { 
      connect($elem1[0], $elem2[0], "#0F0", 5); 
     } else { $elem1.addClass('last'); } 
     $('span').removeClass('last'); 
     $elem1.addClass('last'); 
    }); 
}); 

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))); 
    // 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);' />"; 

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

window.testIt = function() { 
    var div1 = document.getElementById('div1') 
    var div2 = document.getElementById('div2') 
    connect(div1, div2, "#0F0", 5); 
} 

</script> 

</head> 

<body> 
<script type="text/javascript"> 

</script> 
    <span style="position: absolute; left: 933px; top: 211px;"> <img src="Untitled-2.jpg" alt="" width="35" height="35" id="div1"/></span> 
    <span style="position: absolute; left: 304px; top: 190px;"> <img src="Untitled-3.jpg" alt="" width="35" height="35" id="div2"/></span> 
    <span style="position: absolute; left: 756px; top: 264px;"> <img src="Untitled-4.jpg" alt="" width="35" height="35" id="div3"/></span> 
    <span style="position: absolute; left: 365px; top: 395px;"> <img src="Untitled-6.jpg" alt="" width="35" height="35" id="div4"/></span> 
    <span style="position: absolute; left: 129px; top: 302px;"> <img src="Untitled-5.jpg" alt="" width="35" height="35" id="div5"/></span> 
    <span style="position: absolute; left: 504px; top: 261px;"> <img src="Untitled-7.jpg" alt="" width="35" height="35" id="div6"/></span> 
    <span style="position: absolute; left: 650px; top: 393px;"> <img src="Untitled-8.jpg" alt="" width="35" height="35" id="div7"/></span> 
    <span style="position: absolute; left: 283px; top: 26px;"> <img src="Untitled-9.jpg" alt="" width="35" height="35" id="div8"/></span> 
    <span style="position: absolute; left: 593px; top: 35px;"> <img src="Untitled-10.jpg" alt="" width="35" height="35" id="div9"/></span> 
    <span style="position: absolute; left: 784px; top: 42px;"> <img src="Untitled-1.jpg" alt="" width="35" height="35" id="div10"/></span> 
</body> 
</html>

來源

2014-01-21 user3095198

您可以在您想要停止執行的該行使用'return'。 – Jai

用戶點擊一個圖像（稱之爲「家」），然後點擊另一個圖像，並在它們之間畫一條線。用戶繼續點擊圖像，直到用戶再次點擊「家」。那時你想做點什麼。它是否正確？ – TimSPQR

這是正確的！我沒有表現得很好 – user3095198

，可以試試這個....

$(document).ready(function() { 
var currentTrend = 0, 
    freezed = false;; 
$('img').click(function(){   
    if(freezed) { 
     return; 
    } 
    var currentEl = $(this); 
    var $elem1 = $(this).parent();   
    if(currentEl.hasClass("selected")) { 
     currentEl.toggleClass('selected'); 
     if($elem1.hasClass("last"+currentTrend)) {         
       $("div.lastLine" + currentTrend).remove(); 
       currentTrend--; 
       return; 
     } else if (currentTrend > 2) { 
      $('body').append('<div class="message">Finished</div>'); 
      freezed = true;    
     } 
    } 
    var $elem2 = $('span.last'+currentTrend); 
    currentEl.toggleClass('selected'); 

    $('span').removeClass('last'); 

    currentTrend++; 
    if ($elem2.length > 0) { 
     lastLine = connect($elem1[0], $elem2[0], "#0F0", 5); 
     lastLine.addClass('lastLine'+ currentTrend); 
    } 

    $elem1.addClass('last' + currentTrend); 

});

}）;

http://jsfiddle.net/vinodgubbala/8WFuY/1/

來源

2014-01-21 10:34:09

啊，對不起，我沒有看到評論想出家：什麼

var stop_process = false; 
$('img').click(function(){ 
    if(!stop_process){ 
     if($(this).hasClass('home')) 
      stop_process = true; 
     if($('img.home').length == 0) 
      $(this).addClass('home'); 

     var $elem1 = $(this).parent(); 
     var $elem2 = $('span.last'); 
     $(this).toggleClass('selected'); 
     if ($elem2.length > 0) { 
      connect($elem1[0], $elem2[0], "#0F0", 5); 
     } else { $elem1.addClass('last'); } 
     $('span').removeClass('last'); 
     $elem1.addClass('last'); 
    } 
});

我把我的第一次答覆這裏。也許還有一些有用的東西。好了，我的第一個猜測是：

var stop_process = false; 
$('img').click(function(){ 
    if(!stop_process){ 
     if($(this).hasClass('selected')) 
      stop_process = true; 
        ... } 
});

但是，這將意味着，我們假設，一個用戶點擊圖片兩次，只有當他fullfills一個圓。也許這對你來說足夠了，我不知道劇本的目的。讓我們假設這個點擊道路：

IMG1 - IMG2 - IMG3 - IMG4 - IMG2 是IMG2 - ... - IMG2是您的有效圈子嗎？

如果是這樣，你還是要避免這種情況作爲計算一個圓圈： IMG1 - IMG2 - IMG1

這是一個快速scetch：

var stop_process = false; 
$('img').click(function(){ 
    if(!stop_process){ 
     if($(this).hasClass('selected') && !$(this).parent().hasClass('third')) 
      stop_process = true; 
     var $elem1 = $(this).parent(); 
     var $elem2 = $('span.last'); 
     $(this).toggleClass('selected'); 
     if ($elem2.length > 0) { 
      $('span').removeClass('third'); 
      $elem2.addClass('third'); 
      connect($elem1[0], $elem2[0], "#0F0", 5); 
     } else { $elem1.addClass('last'); } 
     $('span').removeClass('last'); 
     $elem1.addClass('last'); 
    } 
});

來源

2014-01-21 09:30:21 websupporter

在某一點停止功能Javascript

回答

相關問題