gpt4 book ai didi

javascript - jQuery中防止每个img都受到影响

转载 作者:行者123 更新时间:2023-11-28 12:38:55 27 4
gpt4 key购买 nike

当用户滑动 jQuery Slider 时,它会影响每个图像。如何仅更改与该 slider 相关的图像?

我尝试过:$(this).closest('img.down')$(this).siblings('img.down')

$("#slider").slider({
value:50,
min: 0,
max: 100,
step: 50,
slide: function( event, ui ) {
$('img.up, img.down').css('opacity','.4');
if (ui.value >= 51) {
$('img.up').css('opacity','.8');
}
if (ui.value <= 49) {
$('img.down').css('opacity','.8');
}
}
});

Fiddle here

谢谢大家!

最佳答案

您需要更改标记,一个页面中不能有三个具有相同 ID 的项目。你可以做到

class="slider"

将 CSS 的初始化移到函数外部,然后遍历标记以获得正确的图像:

$('img.up, img.down').css('opacity','.4');
$(".slider").slider({
value:50,
min: 0,
max: 100,
step: 50,
slide: function( event, ui ) {
if (ui.value == 50) {
$(this).parent().find('img.up, img.down').css('opacity','.4');
}
if (ui.value >= 51) {
$(this).parent().find('img.up').css('opacity','.8');
}
if (ui.value <= 49) {
$(this).parent().find('img.down').css('opacity','.8');
}
}
});

http://jsfiddle.net/psybJ/9/

关于javascript - jQuery中防止每个img都受到影响,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14326604/

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