gpt4 book ai didi

javascript - 在 .click() 之后更改 .css()

转载 作者:行者123 更新时间:2023-11-28 01:17:33 26 4
gpt4 key购买 nike

我给我写了一个 slider 。 slider 工作得很好,但最后一件事绝对不起作用。我无法重置宽度。我尝试通过 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);*/

});

});

最佳答案

它只能工作一次的原因是因为 width_slider 最初设置为正确的宽度,但随后您将宽度更改为自动,因此 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
});

关于javascript - 在 .click() 之后更改 .css(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23665291/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com