javascript - 第二个范围 slider 在 html 中不起作用

Question

我的表单中有 4 个范围值 slider 元素，只有第一个可以正常工作。

这是我的代码:

    $('#listenSlider').change(function() {
        $('.output b').text( this.value );
    }); 
    $('#listenSlider2').change(function() {
        $('.output2 b').text( this.value );
    }); 
    $('#listenSlider3').change(function() {
        $('.output3 b').text( this.value );
    }); 
    $('#listenSlider4').change(function() {
        $('.output4 b').text( this.value );
    }); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
    <div class="form-group">
        <div class="col-md-6">
            <div class="m-md slider-primary" data-plugin-slider data-plugin-options='{ "value": 1, "range": "min", "max": 5, "min": -1, "step": 0.01 }' data-plugin-slider-output="#listenSlider">
                <input id="listenSlider" type="hidden" value="1" />
            </div>
            <p class="output"> Voice Pitch: <b>1</b></p>
        </div>
        <div class="col-md-6">
            <div class="m-md slider-primary" data-plugin-slider data-plugin-options='{ "value": 0, "range": "min", "max": 14, "min": -14, "step": 0.1 }' data-plugin-slider-output="#listenSlider2">
                <input id="listenSlider2" type="hidden" value="0" />
            </div>
            <p class="output2"> Tones: <b>0</b></p>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-6">
            <div class="m-md slider-primary" data-plugin-slider data-plugin-options='{ "value": 1, "range": "min", "max": 5, "min": 0.1, "step": 0.01 }' data-plugin-slider-output="#listenSlider3">
                <input id="listenSlider3" type="hidden" value="50" />
            </div>
            <p class="output3"> Voice Rate: <b>1</b></p>
        </div>
        <div class="col-md-6">
            <div class="m-md slider-primary" data-plugin-slider data-plugin-options='{ "value": 1, "range": "min", "max": 1, "min": -1, "step": 0.1 }' data-plugin-slider-output="#listenSlider4">
                <input id="listenSlider4" type="hidden" value="50" />
            </div>
            <p class="output4"> Octaves: <b>1</b></p>
        </div>
    </div>
</div>

第一个工作正常，但其他 3 个根本无法工作。

Answer 1

嗨，我认为您需要引用以下链接以获取范围 slider 。 range slider

这对您很有帮助，您只需检查一下并告诉我即可。