Ich versuche einen sehr einfachen Pyramidenbausatz zu bauen. Der Benutzer kann einen Block hinzufügen oder einen entfernen.
Dies funktioniert gut mit dem folgenden Code. Derzeit gebe ich jedoch die Breite des nächsten Blocks mit css (.item1 {200px;}, .item2 {300px;}) an. Das Problem ist, dass ich nicht weiß, wie viele Blöcke der Benutzer eventuell hinzufügen wird, und daher kann ich nicht angeben Dies in CSS. Ich möchte die Breite der Breite jedes weiteren Blocks basierend auf der Breite des vorherigen Blocks + 100px (vorherige Breite + 100px) berechnen. Leider weiß ich nicht, wie das geht ... Jede Hilfe wäre willkommen .
$(document).ready(function() {
//Add Block Functionality
$('#add-block .button').click(function() {
var $block = $('<li><div class="item"><input class="input" type="text" placeholder="#" maxlength="2"></div></li>');
$('.pyramid').append($block);
$('ul li div').addClass(function(index) {
return "item" + index;
}) //this is to increase the item to item 1, item2, item3 etc.
});
//Remove Block Functionality
$('#remove-block .button').click(function() {
$('.pyramid li').last().remove();
}
)
});.item {
margin: 0 auto;
position: relative;
display: flex;
justify-content: center;
}
.item0 {
height: 0px;
width: 0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 60px solid #0488e0;
}
li div.item:not(.item0) {
border-bottom: 60px solid #0488e0;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
margin-top: 10px;
height: 0;
}
.item1 {
width: 200px;
/*plus 100px to create the trapezoid*/
}
.item2 {
width: 300px;
/*plus 100px to create the trapezoid*/
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pyramid">
<li>
</li>
</ul>
<section class="buttons">
<div id="add-block">
<span>Add Block</span>
<div class="button">+
</div>
</div>
<div id="remove-block">
<span>Remove Block</span>
<div class="button">-
</div>
</div>
</section>Sie können die letzte .itemBreite erhalten und dann Ihre gewünschte Nummer anhängenvar lastwidth = $('.pyramid li:last-child .item').width();
$(document).ready(function() {
//Add Block Functionality
$('#add-block .button').click(function() {
var lastwidth = $('.pyramid li:last-child .item').width();
if(lastwidth == null){
var plus = 0;
} else {
var plus = lastwidth + 100;
}
var $block = $('<li><div class="item" style="width:' + plus + 'px"><input class="input" type="text" placeholder="#" maxlength="2"></div></li>');
$('.pyramid').append($block);
//$('ul li div').addClass(function(index) {
//return "item" + index;
//}) //this is to increase the item to item 1, item2, item3 etc.
});
//Remove Block Functionality
$('#remove-block .button').click(function() {
$('.pyramid li').last().remove();
}
)
});.item {
margin: 0 auto;
position: relative;
display: flex;
justify-content: center;
}
.item0 {
height: 0px;
width: 0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 60px solid #0488e0;
}
li div.item:not(.item0) {
border-bottom: 60px solid #0488e0;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
margin-top: 10px;
height: 0;
}
.item1 {
width: 200px;
/*plus 100px to create the trapezoid*/
}
.item2 {
width: 300px;
/*plus 100px to create the trapezoid*/
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pyramid">
<li>
</li>
</ul>
<section class="buttons">
<div id="add-block">
<span>Add Block</span>
<div class="button">+
</div>
</div>
<div id="remove-block">
<span>Remove Block</span>
<div class="button">-
</div>
</div>
</section>Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen