Question

我给我写了一个滑块。滑块工作得很完美，但最后一件事绝对不行。我无法重置宽度。我尝试通过jQuery API中的deferred.done函数调用函数。最后我放了dfd.resolve( "and" );之类的东西。这只能工作一次。如何再次更改 $("#first" ).css("width", t_first); 宽度？

我的JS代码：

$("#zero-img" ).click(function() {
    $(function () {
        var width_slider = ($( "#slider" ).width()) ;
        var width_first = $( "#first" ).width() ;
        var width_first_img = $( "#first-img" ).width() ;
        var width_first_img_container = $( "#first-img-container" ).width() ;
        var width_first_tex = $( "#first-img-text" ).width() ;

        var width_gap = width_slider - width_first - 300;

        var width_img = $( "#first-img-container" ).width() ;
        var t_first = width_first + width_gap;
        $("#first" ).css("width", t_first); //THIS I WANT TO CHANGE AGAIN AFTER FINISHED THE CLICK ACTION
        $("#next-img" ).animate({ width:0 }, "slow" );
        $("#first-img" ).animate({ left: width_first}, "slow", function(){

            if ($("#next-img-container").attr("src").length > 0) {

                var path_on_hold = $("#next-img-container").attr("src");
                $("#on-hold-img-container").attr("src", path_on_hold);
                var value_on_hold = $("#next-img-container").attr("value");
                $("#on-hold-img-container").attr("value", value_on_hold);
                var path_next = $("#first-img-container").attr("src");
                $("#next-img-container").attr("src", path_next);
                var value_next = $("#first-img-container").attr("value");
                $("#next-img-container").attr("value", value_next);
            }
            $(this).css('left', (-1)* width_first);
            var first_img = $("#zero-img-container").attr("src");
            $("#first-img-container").attr("src",first_img);
            var value_first = $("#zero-img-container").attr("value");
            $("#first-img-container").attr("value", value_first);

        } );
        $("#zero-img" ).animate({ left:-150 }, "slow", function() {
            if ($("#zero-on-hold-img-container").attr("src").length > 0) {
                var path_zero = $("#zero-on-hold-img-container").attr("src");
                $("#zero-img-container").attr("src", path_zero);
                var value_zero = $("#zero-on-hold-img-container").attr("value");
                $("#zero-img-container").attr("value", value_zero);
                var pics =  <?php echo json_encode($pics)?>;
                var number = parseInt($("#zero-on-hold-img-container").attr("value"));
                if (pics.hasOwnProperty(number-1) === true ) {
                    var company_id = pics[number-1].company_id;
                    var filename = pics[number-1].filename;
                    var temp = path + pics[number-1].company_id + "/" + pics[number-1].filename;

                    $("#zero-on-hold-img-container").attr("src", temp);
                    $("#zero-on-hold-img-container").attr("value", number-1);
                    $("#zero-on-hold-img-container").attr("value", number-1);
                } else {
                    $("#zero-on-hold-img-container").attr("src", "");
                    $("#zero-on-hold-img-container").attr("value", "");
                }
            } else {
                if ($("#zero-img-container").attr("src").length > 0) {
                    $("#zero-img-container").attr("src", "");
                    $("#zero-img-container").attr("value", "");
                }
            }
        });
        $("#zero-img").animate({ left: 0 }, "slow");
        $("#next-img" ).animate({ width:150 }, "slow" );  
        $("#first-img").animate({ left: 15 }, "slow");
        /*$("#first" ).css("width", auto);*/                

    });

});

Answer 1

它只运行一次的原因是因为width_slider最初设置为正确的宽度，但是您将宽度更改为auto，因此width_slider将永远不再是初始宽度。

<!-- put the initial width of slider in data-init-width -->
<div id="slider" data-init-width="960"> ... </div>

脚本：

$('#zero-img').click(function() {
        var initialWidth = Number($('#slider').attr('data-init-width'));
        if ( $('#slider').width() != initialWidth ){
            $('#slider').css({
                width: initialWidth + 'px'
            });
        }
        var width_slider = $('#slider').width();
        // do the other stuff
});

然后使用mouseup方法

$('#zero-img').mouseup(function(){
    // change the width to the after click width
});

.click（）之后更改.css（）

1 个答案: