Ich benutze jQuery, um dynamisch Eingabeformulare zu erstellen. Ich habe ein Beispiel für meinen Code (dieses Beispiel erstellt keine Eingabeformulare, aber es funktioniert genau wie mein Skript, und es reproduzieren den gleichen Fehler), die Sie spielen können, um besser zu verstehen, was ich meine.Dynamische Elemente mit jQuery separat in verschiedenen Divs erstellen
Das Problem ist, dass, wenn ich drücke auf „Hinzufügen“ des ersten div „Ereignis“, produziert meine jQuery den Schädel mit den Zahlen von 1
Danach beginnen I „Hinzufügen“ des zweiten div „Ereignisses“ drücken, aber die Zahlen beginnen nicht von 1, sondern von der letzten Nummer des ersten div "Ereignisses".
Ändern Sie die Klasse "Ereignis" ist nicht möglich. In diesem Beispiel gibt es 2 div, aber sie könnten 3-4-5 oder mehr sein, alle mit der Klasse "event".
Was kann ich tun, um sowohl das "Ereignis" von 1 zu starten?
var i = 1;
$('.plus').click(function(e) {
var $numberDiv = $('<span>' + i + '</span>').addClass('numberDiv');
var $clear = $('<div />').addClass('clear');
var $event = $(e.currentTarget).closest('.event');
$event.find('.participantContainer').append($numberDiv);
i++;
})
$('.minus').click(function(e) {
var $numberDiv = $('<span>'> + i + '</span>').addClass('numberDiv');
var $clear = $('<div />').addClass('clear');
var $event = $(e.currentTarget).closest('.event');
$event.find('.numberDiv:last').remove();
i--;
})
$('.reset').click(function() {
\t i = 1;
$('.numberDiv').each(function() {
\t $(this).remove();
})
})body {
font-family: sans-serif;
}
button {
background: none;
}
.clear {
clear: both;
}
.plus,
.minus,
.reset {
height: 33px;
font-size: 20px;
cursor: pointer;
margin-right: 2px;
float: left;
margin-bottom: 10px;
border-radius: 10px;
padding: 0 0 0 0;
}
.plus {
border: 2px solid green;
width: 56px;
}
.plus:hover {
background-color: green;
}
.minus:hover {
background-color:red;
}
.minus {
border: 2px solid red;
width: 95px;
}
.reset {
border: 2px solid blue;
width: 95px;
}
.reset:hover {
background-color: lightblue;
}
.numberDiv {
font-size: 20px;
position: relative;
top: -5px;
margin-right: 10px;
}
.numberDiv:before {
content:'☠';
font-size: 30px;
}
.participantContainer {
float: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="event">
<button class="plus">Add</button>
<button class="minus">Remove</button>
<div class="participantContainer"></div>
</div>
<div class="clear"></div>
<div class="event">
<button class="plus">Add</button>
<button class="minus">Remove</button>
<div class="participantContainer"></div>
</div>
<div class="clear"></div>
<button class="reset">Reset</button>Der Hauptgrund ist natürlich, dass ich lerne, und ich weiß nicht viel Erfahrung mit jQuery haben.
Vielen Dank im Voraus!
jQuery ist eine wirklich schlechte Wahl dynamische UIs für die Erstellung von . Ich würde vorschlagen, dass Sie stattdessen React oder Elm lernen. – xs0
Wie von Benutzer xs0 erwähnt, ist [reactjs] (https://reactjs.org/) eine gute Wahl! – Doggo
Vielen Dank für die Antworten! Ich verstehe, dass es bessere Lösungen als jQuery gibt ... aber was, wenn ich es trotzdem benutzen muss? –