最も近いJqueryの問題

Question

私が望むのは、最も近いセレクタを介して.alphaクラスのスパンを選択し、その中の数字を変更することですが、これを動作させることはできません。

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は.increaseAlphaの最も近い要素ではありません。それは.increaseAlphaの兄弟です。 siblings()メソッドを使用して次のようにしてください。

$(".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>