Problem mit Jquery am nächsten

Question

Was ich möchte, ist für die Alpha-Klassenspanne über den nächsten Selektor und die Zahl innerhalb dieser geändert werden, aber ändern, ich kann dies nicht zum Funktionieren bringen.

HTML

<h4> 
    <span class="c1-rgba"></span> 
    <span class="alpha">0.0</span> 
    <input class="increaseAlpha" type="button" name="increase" value="+"> 
    <input class="decreaseAlpha" type="button" name="decrease" value="-"> 
</h4> 

jQuery

$(function() { 
    $(".increaseAlpha").click(function() { 
     $(this).closest('span').text( (Math.min(1, Number($(".alpha").text()) + 0.1)).toFixed(1)) 
    }); 
}); 

Answer 1

.alpha ist nicht das nächste Element von .increaseAlpha. Es ist das Geschwister von .increaseAlpha. Versuchen Sie wie folgt mit siblings() Methode.

$(".increaseAlpha").click(function() { 
 
    var alpha = $(this).siblings('span.alpha'); 
 
    alpha.text((Math.min(1, Number(alpha.text()) + 0.1)).toFixed(1)) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h4> 
 
    <span class="c1-rgba"></span> 
 
    <span class="alpha">0.0</span> 
 
    <input class="increaseAlpha" type="button" name="increase" value="+"> 
 
    <input class="decreaseAlpha" type="button" name="decrease" value="-"> 
 
</h4>