Question

我的问题是，该值正确传递给变量，但我认为缺少某些东西，因为在更改#sol的值时，动画时间不会改变。也许我已经和.on一起工作了（改变......？

$(function() {
var speed = $('#sol').val();
    $(document).on('click', '#engage', function(event){
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollLeft: $($anchor.attr('href')).offset().left
        }, speed);
        event.preventDefault();
    });
});


<form id="speed">
    <select id="sol" style="display:block;">
        <option value="800000">1</option>
        <option value="400000">2</option>
        <option value="200000">4</option>
        <option value="100000">8</option>
        <option value="50000">16</option>
        <option value="32000">25</option>
        <option value="16000">50</option>
        <option value="100000000000">100</option>
    </select>
</form>

Answer 1

#sol元素的值与变量speed之间没有实时映射，当select元素值更改时，这将导致变量值的更新

相反，当您想在单击处理程序

中使用它时，您可以读取select元素的值

$(function () {
    $(document).on('click', '#engage', function (event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollLeft: $($anchor.attr('href')).offset().left
        }, +$('#sol').val());
        event.preventDefault();
    });
});

另一个解决方案是使用一个更改处理程序，它将在更改时更新变量的值

$(function () {
    var speed = $('#sol').val();

    $('#sol').change(function () {
        speed = $(this).val();
    });

    $(document).on('click', '#engage', function (event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollLeft: $($anchor.attr('href')).offset().left
        }, speed);
        event.preventDefault();
    });
});

Answer 2

$(document).on('click', '#engage', function(event){
    var speed = $('#sol').val(); // assign value to speed when ever user click on the element with id engage 
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollLeft: $($anchor.attr('href')).offset().left
    }, speed);
    event.preventDefault();
});

<小时/> 如果您设置speed值并且未使用更改的值更新它，则会出现问题。

变量值不能传递给函数

2 个答案: