Verschlüsse und onclick in Javascript

Ich habe ein einfaches Beispiel für Javascript-Ereignis sprudelt auf this jsfiddle (klicken Sie auf den Mann, und es wird bis zum Schwein Blase). Wie würde ich eine Schließung verwenden, um var interval = 0; aus dem globalen Geltungsbereich zu bekommen, aber behalten Sie die onclick="display('sometext')" in der HTML?Verschlüsse und onclick in 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; 
}

Quelle

2016-03-29 Bannerman

Bitte legen Sie die wichtigsten Teile des Codes in Ihrem Beitrag. Links sind oft willkommen, um zusätzlichen Kontext zu bieten, sollten aber nicht die einzige Referenz sein. –

Sie könnten es in eine IIFE-Datei umbrechen und dann Ereignis-Listener zu den relevanten divs hinzufügen, anstatt die Eigenschaft onclick zu verwenden. – char

Sie können Funktion einfach in eine andere Funktion umschließen, um eine Schließung zu machen. Aber da Sie zwei Funktionen haben, die Sie an die gleiche Schließung binden wollen, brauchen Sie ein Objekt.

dies prüfen https://jsfiddle.net/axrpcaq4/16/ out:

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

Und 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>

Quelle

2016-03-29 05:58:26 Lends

Verschlüsse und onclick in Javascript

Antwort

Verwandte Themen