Question

我陷入了一个愚蠢的问题。我有两个div（白色）。点击它们应该添加一个类，它将颜色从白色变为蓝色。课程正在增加，但颜色没有变化。（我不需要addClass（）只是为了改变颜色，但是后来该类中会有更多的东西，现在我必须正确地执行它。）

div有一个类“缩略图”，onClick我想添加“border-glow”。

// ImageBox component

// Author Sayantan Hore
// Created on 19.08.2014

// --------------------------------

function ImageBox(){
    this.outerContainer = null;
    this.imageBoxArray = [];
}
ImageBox.prototype.createOuterContainer = function(){
    this.outerContainer = $("<div></div>")
    this.outerContainer.addClass("outer-image-container");
    $("body").append(this.outerContainer);

}
ImageBox.prototype.createImageBox = function(){
    if (this.createOuterContainer === null){
        this.createOuterContainer();
    }
    var imageBox = $("<div></div>");
    imageBox.addClass("thumbnail");

    var closeButton = $("<div>x</div>");
    closeButton.addClass("btn-close");

    //imageBox.append(closeButton);
    this.imageBoxArray.push(imageBox);
    return imageBox;
}

ImageBox.prototype.loadImage = function(imPath, imageBox){
    var img = $("<img></img>")
    img.attr("src", imPath);
    imageBox.append(img);

    img.load(function(){
        //console.log($(this).height());
        imgWidth = $(this).width();
        $(this).parent().height(rowHeight);
        $(this).height(rowHeight);
        //console.log($(this).width());
        $(this).parent().width($(this).width());
    });
}

var rowHeight;
$(document).ready(function(){
    rowHeight = parseFloat(($(window).height() * 90 / 100) / 5);
    //console.log(rowHeight);
    var imageBoxObj = new ImageBox();
    imageBoxObj.createOuterContainer();
    for (var i = 0; i < 2; i++){
        var imageBox = imageBoxObj.createImageBox();
        imageBoxObj.outerContainer.append(imageBox);
        var imPath = '../images/im' + (i + 1) + '.jpg';
        //imageBoxObj.loadImage(imPath, imageBox);

    }
    console.log(screen.availHeight);
    console.log($(window).height());
    console.log($(".outer-image-container").height());
    $(".thumbnail").on("click", function(){
        $(this).addClass("border-glow");
        alert($(this).hasClass("border-glow"));
    })
});

here is Fiddle:

在javascript部分查看第57-60行。

有人可以帮忙吗？

Answer 1

.outer-image-container .thumbnail.border-glow{
    background-color: #0066CC; }

这应该是诀窍，只需用这个替换你的borderglow类。

Answer 2

类background-color中的thumbnail覆盖了`border-glow``类中的.border-glow{ background-color: #0066CC !important; }因为它提供了更强大的css选择器。更简单的解决方案是像这样编辑CSS：

{{1}}

Answer 3

只需执行以下操作

.border-glow{
    background-color: #0066CC !important;
}

<强> FIDDLE DEMO

Answer 4

添加$（this）.removeClass（“thumbnail”）;之前

    $(this).addClass("border-glow");

CSS没有通过jQuery更新

4 个答案: