尝试删除并添加类到单个事件元素中断滚动和彩虹颜色功能

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了尝试删除并添加类到单个事件元素中断滚动和彩虹颜色功能相关的知识,希望对你有一定的参考价值。

违规代码块

function changeEventDetails(event) {
var src = 'https://www.google.com/maps/search/?api=1'
var locationURI = encodeURI(event.location)
// window.history.state.eventOpen = true
// var currState = window.history.state
// window.history.pushState(currState, null, "")
$('.calEvent .rainbow').text(event.title)
$('#eventID').text(event._id)
$("#startTime").html(moment(event.start).format('MMM Do h:mm A'));
$("#endTime").html(moment(event.end).format('MMM Do h:mm A'));
if (event.location == null) {
  $('#location').html("N/A")
} else {
  $('#location').html(event.location)
}
if (event.description == null) {
  $("#eventInfo").html("N/A")
} else {
  $("#eventInfo").html(event.description);
}

$("#eventLink").attr('href', event.url);
// $('#mapContainer').html('<iframe \
//       frameborder = "0" \
//       style = "border:0" \
//       src = ' + src + '&query=' + locationURI + ' \
//       allowfullscreen> \
//       </iframe>')
$('#viewMapLink').attr('href', src + '&query=' + locationURI)
// $('.fc-content:contains('+event.title+')')[0].scrollIntoView(true, {
//   behavior: 'smooth',
//   block: 'start'
// })

TweenMax.to($('#Calendar'), .5, {
  scrollTo: {
    y: $('.fc-content:contains(' + event.title + ')')[0],
    // offsetY: 50
  }
})

if($('.rainbow2').length >= 1 ){
  $('.rainbow2').removeClass()
  $('.fc-content:contains('+event.title+')').addClass('rainbow2')
} else {
  $('.fc-content:contains('+event.title+')').addClass('rainbow2')
}
console.log(event.title)

}

特别是破坏的块是if('.rainbow2')部分。删除后一切正常。当它从gsap中断添加ScrollTo函数时,所选元素上的彩虹背景完全消失。

https://github.com/maxcr/testytest

我主持了一个github回购,但你需要用dugway来运行它

https://github.com/bigcartel/dugway

一旦安装创建新的dugway项目。 cd进入dir并克隆我的项目以覆盖任何具有相同名称的文件。然后dugway server和另一个终端CD进入源和npm run watchProd

答案

$('.rainbow2').removeClass()将删除所选元素中的所有类。要删除你需要的rainbow2课程

$('.rainbow2').removeClass('rainbow2')

以上是关于尝试删除并添加类到单个事件元素中断滚动和彩虹颜色功能的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript课程——Day21(jQuery下class操作css操作元素宽高元素的位置滚动条创建.添加.替换.删除.克隆节点事件滑上事件的区别)

创建(彩虹)调色板

JQ 滚动图片

js on绑定事件

如何在 Gatsby 的标题中添加滚动事件

树莓派系列-5-4B配置关闭休眠去掉滚动代码,彩虹瓶,增加开机动画