Question

我正在尝试更改导航的文本颜色，具体取决于第一张幻灯片是否具有类"flex-active-slide"，您可以在此处www.zadroinc.com看到导航。

我正在使用以下代码：

$(document).ready(function() {
 if ($(".slide").eq(0).hasClass("flex-active-slide")) {
   $(".z-nav > li > a").css("color", "white"); 
 } else { 
   $(".slide").eq(1).hasClass("flex-active-slide");
   $(".z-nav > li > a").css("color", "black"); }
});

我遇到的是它会更改颜色，但是当幻灯片更改时它不会再次执行。

Answer 1

您的函数仅在文档准备就绪时运行一次，无论您运行何种事件或定时驱动的代码来更改站点上的幻灯片，这都是合并函数以更改导航锚元素的CSS的最佳位置。

如果由于某种原因您无法将更改CSS的代码合并到已经在运行以更改幻灯片的脚本中，那么您可以尝试根据锚链接上发生的CSS转换触发CSS更改在“幻灯片”分类的li元素中。

$('.slide a').on('transitionend', function() {
  // get index of transitioned anchor element's parent slide
  var slideIndex = $(this).parent().index();
  if (slideIndex === 0) {
    $('.z-nav > li > a').css('color', 'white');
  } else {
    $('.z-nav > li > a').css('color', 'black');
  }
});

Answer 2

将此行添加到CSS即可完成此操作。根据您使用的滑块，您需要改为更改背景颜色。

var reply = (Activity)activity;
reply = reply.CreateReply("reply");

reply.ChannelData = JObject.Parse($"{{thread_ts:'{ts}'}}");
await context.PostAsync(reply);

jQuery代码根据幻灯片的类别更改文本

2 个答案: