Question

我在Bootstrap选项卡中实现了Ion.rangeSlider，滑块只显示在选项卡内部，它实际上位于选项卡内容面板之外。

因此，有3个标签初学者，价值，专家。
点击每个标签后，范围滑块的值将分别变为 85000 ， 525000 ， 1000000 。
有一个 + / - 按钮，单击此按钮可将滑块值增加/减少1000.当单击范围滑块按钮并将其拖动到任意点时，此+/-按钮可正常工作。 / LI>

当点击任何标签按钮时，问题是+/-无法正常工作。要复制问题： -

1）单击“值”或“专业”按钮

2）然后点击+/-按钮，这会增加/减少该点的值，但它不会。

请为此提供解决方案。感谢。

＆＃13;

var $keywordSlider = $('#slider-bar'),
    $btnMinus = $('#button-minus'),
    $btnPlus = $('#button-plus'),
    min = 0,
    max = 1200000,
    from = 85000,
    step = 1000;
    
 
$keywordSlider.ionRangeSlider({
    type: "single",
    keyboard: true,
    prettify_separator: ",",
    min: min,
    max: max,
    step: step,
    from: from,
    onFinish: function (data) {
        from = data.from;
    }
});

    
$btnMinus.on("click", function () {
    updateRange(-1);
});
    
$btnPlus.on("click", function () {
    updateRange(1);
});
    
var range_instance = $keywordSlider.data("ionRangeSlider");
    
var updateRange = function (direction) {
    from += step * direction;
    if (from < min) {
        from = min;
    } else if (from > max) {
        from = max;
    }
    
    range_instance.update({
        from: from
    });
};
    

$('ul.nav-tabs li#starter-plan a').click(function(data) {
    range_instance.update({
        from: 85000
    });
});

$('ul.nav-tabs li#value-plan a').click(function(data) {
     range_instance.update({
        from: 525000
    });
});

$('ul.nav-tabs li#pro-plan a').click(function(data) {
     range_instance.update({
        from: 1000000
    });
});

＆＃13;

<div id="membership-plan">
            <ul class="nav nav-tabs">
                <li id="starter-plan" role="presentation" class="active"><a href="#tab-starter" data-toggle="tab">Starter</a></li>
                <li id="value-plan" role="presentation"><a href="#tab-value" data-toggle="tab">Value</a></li>
                <li id="pro-plan" role="presentation"><a href="#tab-pro" data-toggle="tab">Pro</a></li>
            </ul>
            
            <div id="keyword-slider">
                <h2 class="txt-center">Custom</h2>
                
                <h3>Keywords total:</h3>
                
                <input type="text" id="slider-bar" name="example_name" value="" style="width: 64%;" />
                
                
                <br /><br /><br /><br /><br />
                
                <button id="button-minus">&minus;</button> &nbsp; &nbsp; <button id="button-plus">&plus;</button>
            </div> <!-- END KEYWORD SLIDER -->
            
            <div class="tab-content">
                <div id="tab-starter" class="tab-pane fade in active">
                    <div class="plan-details">
                        <header>
                            <strong class="price">$23</strong>

                            <span class="period">PER MONTH</span>
                        </header>

                        <span class="para base-xs-buffer">
                            <b>Data</b><br />
                            Avg. Monthly Volume<br />
                            Historical Volume<br />
                            Competition Score<br />
                            Recommended Bid ($USD)
                        </span>

                        <span class="para">
                            <b>Support</b><br />
                            Email only
                        </span>

                        
                        <footer>                
                            <button class="btn btn-normal">Sign-up</button>

                            <button class="btn btn-normal">Contact</button>                      
                        </footer>
                    </div> <!-- END PLAN DETAILS -->
                    
                </div> <!-- END TAB STARTER -->
                
                <div id="tab-value" class="tab-pane fade">
                    <div class="plan-details">
                        <header>
                            <strong class="price">$115</strong>

                            <span class="period">PER MONTH</span>
                        </header>

                        <span class="para base-xs-buffer">
                            <b>Data</b><br />
                            Avg. Monthly Volume<br />
                            Historical Volume<br />
                            Competition Score<br />
                            Recommended Bid ($USD)
                        </span>

                        <span class="para">
                            <b>Support</b><br />
                            Email only
                        </span>

                        <footer>                
                            <button class="btn btn-normal">Sign-up</button>

                            <button class="btn btn-normal">Contact</button>                      
                        </footer>
                    </div> <!-- END PLAN DETAILS -->
                </div> <!-- END TAB VALUE -->
                
                <div id="tab-pro" class="tab-pane fade">
                    <div class="plan-details">
                        <header>
                            <strong class="price">$185</strong>

                            <span class="period">PER MONTH</span>
                        </header>

                        <span class="para base-xs-buffer">
                            <b>Data</b><br />
                            Avg. Monthly Volume<br />
                            Historical Volume<br />
                            Competition Score<br />
                            Recommended Bid ($USD)
                        </span>

                        <span class="para">
                            <b>Support</b><br />
                            Email only
                        </span>

                        <footer>                
                            <button class="btn btn-normal">Sign-up</button>

                            <button class="btn btn-normal">Contact</button>                      
                        </footer>
                    </div> <!-- END PLAN DETAILS -->
                </div> <!-- END TAB PRO -->
                
            </div> <!-- END TAB CONTENT -->
        
        </div> <!-- END MEMBERSHIP PLAN -->

＆＃13;

Answer 1

只需将= VALUE添加到标签点击代码即可解决问题。

$('ul.nav-tabs li#starter-plan a').click(function(data) {
range_instance.update({
    from: 85000
});

Ion.rangeSlider添加/减号和标签问题

1 个答案: