javascript - CSS 未通过 jQuery 更新

Question

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

div 有一个类“thumbnail”，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 类即可。