jQuery click() inside "für" Schleife einmal

Brennen

Das ist mein HTML-Code:jQuery click() inside "für" Schleife einmal

<!DOCTYPE html> 
<head> 
    <title>Chemist</title> 
    <link href="stylesheet.css" rel="stylesheet"> 
</head> 
<body> 
    <h2 id="money"></h2> 
    <table border="1px" id="inventory_t"></table> 
    <script src="jquery.js"></script> 
    <script src="app.js"></script> 
</body> 
</html>

Dies ist der app.js Code:

var money = 10; 
var inventoryNames = ["Carbon", "Hydrogen"]; 
var inventoryAmounts = [5, 5]; 
var inventoryLength = 2; 

updateMoney(); 
populateInventory(); 
checkAddToMixClick(); 

function updateMoney(){ 
    $("#money").text(money + "$"); 
} 
function populateInventory(){ 
    $("#inventory_t").empty(); 
    $("#inventory_t").append("<tr><td colspan='3'>Inventory</td></tr>") 
    for(let i = 0; i < inventoryLength; i++){ 
     $("#inventory_t").append("<tr><td style='text-align:center'>" + inventoryNames[i] + "</td><td style='text-align:center'>" + inventoryAmounts[i] + "</td><td id='add_to_mix_" + i + "'>+</td></tr>") 
    } 
} 
function checkAddToMixClick(){ 
    for(let i = 0; i < inventoryLength; i++){ 
     $("#add_to_mix_" + i).click(function(){ 
      inventoryAmounts[i]--; 
      populateInventory(); 
     }); 
    } 
}

Mein Problem ist, dass, wenn ich laufen diese und klicken Sie auf das "+" das Ereignis click() ausgelöst wird, aber danach passiert nichts.

Debuggen zeigt, dass wenn ich die checkAddToMixClick() -Funktion aufrufen und auf das "+" klicken, es wieder funktioniert, aber danach nicht mehr funktioniert.

Irgendeine Lösung das?

Quelle

2016-07-25 valkyrd

nicht mehr funktioniert? Alle Ihre Loops werden nur zweimal ausgeführt. – theblindprophet

Wie kann ich dann ständig nach einem Klick suchen? (Ich bin ein totaler Noob bei Javascript, ja) – valkyrd

Fügen Sie checkAddToMixClick(); zu Ihrer populateInventory() Funktion hinzu, und entfernen Sie checkAddToMixClick() von der Oberseite Ihres Codes.

var money = 10; 
 
var inventoryNames = ["Carbon", "Hydrogen"]; 
 
var inventoryAmounts = [5, 5]; 
 
var inventoryLength = 2; 
 

 
updateMoney(); 
 
populateInventory(); 
 

 
function updateMoney(){ 
 
    $("#money").text(money + "$"); 
 
} 
 
function populateInventory(){ 
 
    $("#inventory_t").empty(); 
 
    $("#inventory_t").append("<tr><td colspan='3'>Inventory</td></tr>") 
 
    for(let i = 0; i < inventoryLength; i++){ 
 
     $("#inventory_t").append("<tr><td style='text-align:center'>" + inventoryNames[i] + "</td><td style='text-align:center'>" + inventoryAmounts[i] + "</td><td id='add_to_mix_" + i + "'>+</td></tr>") 
 
    } 
 
    checkAddToMixClick(); 
 
} 
 
function checkAddToMixClick(){ 
 
    for(let i = 0; i < inventoryLength; i++){ 
 
     $("#add_to_mix_" + i).click(function(){ 
 
      inventoryAmounts[i]--; 
 
      populateInventory(); 
 
     }); 
 
    } 
 
}

<!DOCTYPE html> 
 
<head> 
 
    <title>Chemist</title> 
 
    <link href="stylesheet.css" rel="stylesheet"> 
 
</head> 
 
<body> 
 
    <h2 id="money"></h2> 
 
    <table border="1px" id="inventory_t"></table> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script> 
 
</body> 
 
</html>

Quelle

2016-07-25 17:58:36 geek1011

* facepalm * danke, es war so offensichtlich: D – valkyrd

@valkyrd Danke – geek1011

As you can see here Sie klicken

var money = 10; 
var inventoryNames = ["Carbon", "Hydrogen"]; 
var inventoryAmounts = [5, 5]; 
var inventoryLength = 2; 

updateMoney(); 
populateInventory(); 

function updateMoney(){ 
    $("#money").text(money + "$"); 
} 
function populateInventory(){ 
    $("#inventory_t").empty(); 
    $("#inventory_t").append("<tr><td colspan='3'>Inventory</td></tr>") 
    for(let i = 0; i < inventoryLength; i++){ 
     $("#inventory_t").append("<tr><td style='text-align:center'>" + inventoryNames[i] + "</td><td style='text-align:center'>" + inventoryAmounts[i] + "</td><td id='add_to_mix_" + i + "'>+</td></tr>"); 
     $("#add_to_mix_" + i).click(function(){ 
      inventoryAmounts[i]--; 
      populateInventory(); 
     }); 
    } 
}

Quelle

2016-07-25 18:00:46 Luca

var money = 10; 
 
var inventoryNames = ["Carbon", "Hydrogen"]; 
 
var inventoryAmounts = [5, 5]; 
 
var inventoryLength = 2; 
 

 
updateMoney(); 
 
populateInventory(); 
 

 

 
$(document).on("click", ".clicker", function() { 
 
\t var id = $(this).data('id'); 
 
    inventoryAmounts[id]--; 
 
\t populateInventory(); 
 
}); 
 

 
function updateMoney(){ 
 
    $("#money").text(money + "$"); 
 
} 
 
function populateInventory(){ 
 
    $("#inventory_t").empty(); 
 
    $("#inventory_t").append("<tr><td colspan='3'>Inventory</td></tr>") 
 
    for(let i = 0; i < inventoryLength; i++){ 
 
     $("#inventory_t").append("<tr><td style='text-align:center'>" + inventoryNames[i] + "</td><td style='text-align:center'>" + inventoryAmounts[i] + "</td><td class='clicker' data-id='" + i + "'>+</td></tr>"); 
 

 
    } 
 
}

.clicker{}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2 id="money"></h2> 
 
<table border="1px" id="inventory_t"></table>

Ich denke, die bisherigen Antworten waren großartig bewegen müssen. Ich wollte nur eine Alternative bereitstellen, da es so aussieht, als würden Sie die Daten inkrementell hinzufügen wollen.

Sie können $ .on() verwenden, um einen der TDs, die dem DOM in Zukunft hinzugefügt werden, anzuhängen. Dadurch können Sie die Verdrahtung von Ereignissen zu jedem <td id="add_to_mix"_> beseitigen. Sie können also bei Bedarf einfach an die Tabelle anhängen, anstatt alles neu zu erstellen.

Ich habe eine CSS-Klasse hinzugefügt, um den Code einfach zu machen, aber Sie können einen beliebigen Selektor verwenden. Ich habe auch das Daten-Tag verwendet, um die Analyse der ID-Eigenschaft zu vermeiden.

$(document).on("click", ".clicker", function() { 
    var id = $(this).data('id'); 
    inventoryAmounts[id]--; 
    populateInventory(); 
});

http://api.jquery.com/on/

Quelle

2016-07-25 18:34:39 hdz

Ich werde das jetzt versuchen, danke. – valkyrd

jQuery click() inside "für" Schleife einmal

Antwort

Verwandte Themen