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

Question

有问题的代码块

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 存储库，但您将需要运行它

https://github.com/bigcartel/dugway

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

Answer 1

$('.rainbow2').removeClass() 将从所选元素中删除 all classes。要删除 rainbow2 class，您需要

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

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

Trying to remove and add class to single event element breaks scrolling and rainbow color function

jquery

fullcalendar

gsap