1

我使用 jQuery 制作了幻灯片。它使用fadeIn 和fadeOut 方法。这工作正常。

我需要帮助的是向另一个 div 添加一个 css 类，具体取决于显示的幻灯片。我在 JSfiddle 中添加了一些缩短的代码，这样您就可以更好地理解我的意思。

http://jsfiddle.net/dRqKM/

我希望在显示相应的幻灯片时突出显示粉红色框。

添加以下内容似乎不起作用：

if ($("#firstSlide").css("display") == "block") {
    $("#div1").addClass("Highlight");
    $("#div2").removeClass("Highlight");
    $("#div3").removeClass("Highlight");
}
4

5 回答 5

0

您拥有的那些 if 语句只会在页面准备好时运行一次，而您会希望它们在点击时被触发，我想。此外，您的 Highlight 类没有足够高的特异性来覆盖 .button 类的背景样式。在您的样式表中考虑这一点：

div.Highlight { background:green; }

然后将节点添加到样式规则将覆盖按钮类的背景。

于 2013-02-22T21:39:50.890 回答
0

三大问题：

  1. 的特殊性.Highlight与.button因为.Highlight在 CSS 定义中首先出现，所以 bg 颜色从.button获胜并保持粉红色。赋予它更高的特异性或更高的重要性（例如div.Highlightor.button.Highlight或 use !important）
  2. 您的代码没有考虑轮换——当您单击下一个/上一个按钮时。所以任何变成绿色的东西都会保持绿色，因为你没有旋转它。
  3. 您的检查代码（if/else if/else if 块）是错误的。看起来不错，if但其他两个条件块是错误的。我将假设这只是一个演示错字。但我在我的例子中修复了它。

http://jsfiddle.net/dRqKM/1/ 查看这个小提琴的工作版本。请注意，如果您希望框在淡入淡出结束之前转动，只需将调用移动到调用changeActiveChild之后而不是fadeIn回调函数内部，例如http://jsfiddle.net/dRqKM/6/

于 2013-02-22T21:44:59.477 回答
0

我在这里修复了一些逻辑问题：

http://jsfiddle.net/dRqKM/7/

除此之外最大的问题是.Highlight该类是在该类之前声明的，button因此将它们都添加了，button该类仍然具有优先权。因此，即使逻辑正确，它也无法正常工作。我将班级移到.Highlight班级下方button并修复了一些逻辑。现在你们都可以走了。

于 2013-02-22T21:51:42.063 回答
-1

从所有按钮中删除类，然后将其添加回正确的类：

$('.buttons').removeClass('Highlight');
targetButton.addClass('Highlight');

此外，您的Highlight课程不够具体，无法覆盖该button课程。另一件需要注意的事情是，如果您有意background-color: green;而不是background. backgroundCSS 属性用作快捷方式，语法不同。如果您只指定颜色，通常首选前一种方法。

这是一个工作版本：

 $(document).ready(function () {
     $('.slideshow').find('> li:eq(0)').nex\All().css({ 'opacity': '0', 'display': 'none' });
     $('.controls > a').click(function (event) {
        event.preventDefault();
        var currentslide = $(this).parents('li:first');

        var currentposition = $('.slideshow li').index(currentslide);
        var nextposition = ($(this).attr('class') == 'next') ? currentposition + 1 : currentposition - 1;

        $('.buttons').removeClass('Highlight');
        $('#div'+(nextposition+1)).addClass('Highlight')

        $('.slideshow li:eq(' + currentposition + ')').hide() 
        $('.slideshow li:eq(' + nextposition + ')').fadeIn(2000);
    });
});

JSFiddle：http: //jsfiddle.net/dRqKM/8/

文档

于 2013-02-22T21:38:22.417 回答
-1

在这里你是队友：http: //jsfiddle.net/zFnfC/

两行在 js 和 1 在 css

$("div.buttons").removeClass('Highlight');
$("#div" + (nextposition + 1)).addClass('Highlight');

和CSS：

.Highlight { background: green !important; }
于 2013-02-22T21:45:29.717 回答