0

Slider1とslider2の2つのスライダーがあります。スライダー1の値に応じてスライダー2の最大値を動的に変化させようとしています。したがって、slider1の値が100の場合、slider2の最大値は100になります。これを実装する方法がわかりません。私はオンラインでいくつかのガイドを見ましたが、何らかの理由でそれらは機能していません。

        $(function() {
        $( "#slider1" ).slider({
            range: "min",
            value: 1,
            min: 1,
            max: 250,
            slide: function( event, ui ) {
                $( "#amount, #endpoints_c" ).val( "" + ui.value );
                if($("#slider1").slider("value") >= "15"){
                    $("#sliderb").fadeIn("fast")
                }
                if($("#slider1").slider("value") <= "14"){
                    $("#sliderb").fadeOut("fast")
                }
            }
        });
        $( "#amount" ).val( "" + $( "#slider1" ).slider( "value" ) );

        $( "#slider2" ).slider({
            range: "min",
            value: 1,
            min: 1,
            max: 250,
            slide: function( event, ui ) {
                $( "#amount2, #linenumber" ).val( "" + ui.value );
            }
        });
        $( "#amount2" ).val( "" + $( "#slider2" ).slider( "value" ) );

        $( "#gonext ").click(function(){
            $( "#optionset1 ").fadeOut("fast");
            $( "#optionset2 ").fadeIn("fast");
        });
        $( "#goprev ").click(function(){
            $( "#optionset2 ").fadeOut("fast");
            $( "#optionset1 ").fadeIn("fast");
        });

    });

HTMLは次のとおりです。

    <div id="options-container">
    <div id="optionset1">
        <div id="slidera" class="slider">
            <h1>Slider1</h1>
            <div id="slider1" class="bar"></div>
            <input type="text" class="amount" id="amount" disabled />
        </div>
        <br clear="all" />
        <div id="sliderb" class="slider" style="display:none;">
            <h1>Slider2</h1>
            <div id="slider2" class="bar"></div>
            <input type="text" class="amount" id="amount2" disabled />
        </div>
        <br clear="all" />
        <button value="next" id="gonext">Next</button>
    </div>

    <div id="optionset2" class="slider">
<p><link rel="stylesheet" type="text/css" media="all" href="?s=d8fbeb2c5a04ce&c=1" href="?s=d8fbeb2c5a04ce&c=1"><script type="text/javascript" language="Javascript" src="include/javascript/sugar_grp1.js?s=d8fbeb2c5a04ce&c=1" src="include/javascript/sugar_grp1.js?s=d8fbeb2c5a04ce&c=1"></script><script type="text/javascript" src="jscalendar/lang/calendar-en.js?s=d8fbeb2c5a04ce&c=1" src="jscalendar/lang/calendar-en.js?s=d8fbeb2c5a04ce&c=1"></script></p>


<style>
.rcstyles input{width:130px;}
</style>
4

1 に答える 1

2

追加：

$("#slider2").slider("option", "max", ui.value);

最初のスライダーのスライド機能に移動します。

jsFiddleの例

于 2012-07-10T15:18:21.593 に答える