Kommentierfunktion lösung 2
Das wäre doch einfach nee Display None und block Funktion oder nicht. Aber das kannst du ja nicht meinen, das wäre ja zu einfach. Weil dann brauchst du ja alle Klassen auf Display None und die ersten beiden blendest du dann wieder ein. Mit dem Klick auf Button lässt du dann wieder alles anzeigen mit Display block. Oder verstehe ich dich irgendwie falsch?
Der hier verwendete Code
<script src="/js_webseite/jquery.js"></script>
<style>
*{
margin:0;
padding:0;
}
.kommentare{
height:20px;
}
#kommentarspalte{
width:100%;
display:inline-block;
background:lightgrey;
min-height:40px;
height:40px;
overflow:hidden;
border:2px solid red;
}
#mehr{
position:fixed;
left:600px;
top:20px;
font-size:30px;
text-align:center;
}
textarea{
text-align:center;
height:100px;
width:60%;
margin-left:20%;
}
#komsend{
text-align:center;
width:300px;
margin-left:calc(50% - 150px);
height:30px;
font-size:25px;
border-radius:5px;
border:2px solid black;
box-shadow:2px 2px 2px;
}
</style>
<div id="kommentarspalte">
<div id="helfer">
<div id="kommentare1" class="kommentare">Hallo</div>
<div id="kommentare2" class="kommentare">tschüss</div>
</div>
</div>
<span>Zeige die letzten Einträge</span>
<button class="but" data-wert="2" id="a2">2</button>
<button class="but" data-wert="3" id="a3">3</button>
<button class="but" data-wert="4" id="a4">4</button>
<button class="but" data-wert="5" id="a5">5</button>
<button class="but" data-wert="6" id="a6">6</button>
<button class="but" data-wert="7" id="a7">7</button>
<button class="but" data-wert="8" id="a8">8</button>
<button class="but" data-wert="9" id="a9">9</button>
<br>
<textarea id="kom"></textarea><br>
<button id="send">senden</button>
<script>
var d=2;
var kommentarspalte=document.getElementById('helfer');
document.getElementById('send').addEventListener('click',function(){
var kommi = document.createElement("div");
d++;
kommi.id="kommentare"+d;
kommi.innerHTML=document.getElementById("kom").value+' test '+d;
document.getElementById("kom").value='';
kommentarspalte.appendChild(kommi);
buttons();
if(d>9){
f=d-9;
$('#kommentare'+f).remove();
}
})
$('.but').click(function(){
da=$(this).data('wert');
pix=da*20;
$('#kommentarspalte').css('height',pix+'px');
$('#helfer').css('marginTop','-'+pix1+'px');
});
function buttons(){
for(a1=2;a1<=d;a1++){
$('#a'+a1).prop("disabled",false);
}
for(a=d;a<=9;a++){
$('#a'+a).prop("disabled",true);
}
} buttons()
</script>