Закрытие и onclick в Javascript

У меня есть простой пример javascript события пузырь на this jsfiddle (нажмите на человека, и он будет пузырь до свиньи). Как использовать закрытие, чтобы получить var interval = 0; из глобальной области, но сохранить onclick="display('sometext')" в html?Закрытие и onclick в Javascript

var interval = 0; 

function display(animal) { 
    window.setTimeout(function() { showText(animal) }, interval); 
    interval = interval+300; 
    window.setTimeout(function() { clear() }, interval); 
} 

function showText(animal) { 
    $(".alGore").text(animal.toUpperCase()); 
    $("."+animal+"-box").css({'background-color':'#ff0'}); 
} 

function clear(animal) { 
    $(".alGore").text(''); 
    $("*").css({background: 'transparent'}); 
    interval = 0; 
}

источник

2016-03-29 Bannerman

Пожалуйста, включите наиболее соответствующие части кода в пределах вашего сообщения. Ссылки часто приветствуются для предоставления дополнительного контекста, но не должны быть единственной ссылкой. –

Вы можете обернуть его в IIFE, а затем добавить прослушиватели событий в соответствующие div, а не иметь свойство onclick. – char

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

Проверьте это https://jsfiddle.net/axrpcaq4/16/:

var animalBox = function(){ 
    var interval = 0; 
    return { 
    display: function(animal) { 
     var that = this; 
     window.setTimeout(function() { that.showText(animal) }, interval); 
     interval = interval+300; 
     window.setTimeout(function() { that.clear() }, interval); 
    }, 
    showText: function(animal) { 
     $(".alGore").text(animal.toUpperCase()); 
     $("."+animal+"-box").css({'background-color':'#ff0'}); 
    }, 
    clear: function(animal) { 
     $(".alGore").text(''); 
     $("*").css({background: 'transparent'}); 
     interval = 0; 
    } 
    } 
}();

И HTML:

<div class="center"> 
    <div class="pig-box center" onclick="animalBox.display('pig')"> 
    <img src="http://i.imgur.com/MumugGd.png" alt="pig" class="icon">  
     <div class="bear-box center" onclick="animalBox.display('bear')"> 
     <img src="http://i.imgur.com/p7L5DHL.png" alt="bear" class="icon">  
      <div class="man-box center" onclick="animalBox.display('man')"> 
      <img src="http://i.imgur.com/cKvJT7T.png" alt="man" class="icon"> 
      </div> 
     </div> 
    </div> 
    <div class="alGore"></div> 
</div>

источник

2016-03-29 05:58:26 Lends

Закрытие и onclick в Javascript

ответ

Смежные вопросы