课程改变了，但后台不会，为什么不改变？

我确定这是简单的，我错过了一些明显的东西，但我试图创建它，以便背景在高光和默认颜色之间切换。我可以改变的背景是，如果我做的：课程改变了，但后台不会，为什么不改变？

.css("background-color", "yellow")

但试图切换出于某种原因不能正常工作的类。它改变了.black上的班级，但这就是全部，没有背景颜色变化。

//This is my JQuery statement 
Home.HighlightBackground = function() 
{ 
    $(".black").click(function() 
    { 
     $(this).toggleClass("highlighted") 
    }) 

} 


//This is the JQuery that creates the board 

var cells = $(".cell"); 
var colorCount = 0; 

for (var i = 0; i < cells.length; i++) 
{ 
    var cell = $(cells[i]); 
    var isDark = colorCount % 2 == 0; 
    var isNextRow = (i + 1) % 8 == 0; 
    colorCount += isNextRow ? 2 : 1; 
    cell.css("background-color", isDark ? "navy" : "white"); 
} 


//This is the related CSS 

.home > .board 
{ 
    display: table; 
    border: 1px solid black; 
} 

.home > .board > .row 
{ 
    display: table; 
} 

.home > .board > .row > .cell 
{ 
    width: 80px; 
    height: 80px; 
    border: 1px solid black; 
    display: inline-block; 
} 

.piece 
{ 
    background-size: 75px 75px; 
    background-repeat: no-repeat; 
    background-position: center; 
    background-origin: content-box; 
} 

.red 
{ 
    background-image: URL('../images/red.png'); 
} 


.black 
{ 
    background-image: URL('../images/black.png'); 
} 

.highlighted 
{ 
    background-color: yellow; 
} 


//html source 



<html> 

<head> 
    <title>@Model.PageTitle</title> 
    <link href="~/Styles/Home.css" rel="stylesheet" /> 
</head> 

<body> 

     <script   src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
     <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery- ui.min.js"></script> 
     <script src="~/Scripts/Home.js"></script> 

     <div class="home"> 

      <div class="board"> 
       <div class="row"> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
       </div> 
       <div class="row"> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
       </div> 
       <div class="row"> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
       </div> 
       <div class="row"> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
       </div> 
       <div class="row"> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
       </div> 
       <div class="row"> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
       </div> 
       <div class="row"> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
       </div> 
       <div class="row"> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
       </div> 
      </div> 

     </div> 

</body>

来源

2015-09-29 Kyle

发布一些'html'也是为了预览!! –

您是否使用Firebug检查过生成的html源代码？ – reporter

我不怀疑你有什么理由，但只考虑将所有内容切换为“背景色”。我猜，“black.png”是黑色像素？如果是这样，请改为颜色以避免过载并提高性能。 –

你混合background-image和background-color。如果这是一个选项，请同时设置为background以使背景设置为黄色。否则图像将始终呈现在颜色之上。

另一种方法可以覆盖在强调级的background-image属性：

.highlighted 
{ 
    background-color: yellow; 
    background-image: none; 
}

来源

2015-09-29 14:03:20

在底部添加了html源代码 – Kyle

使用background属性，而不是你个人的背景属性。 background将否决任何先前宣称的background-color和background-image以及对该元素的其他background-*声明。

CSS

.black { 
    background: URL('../images/black.png'); 
} 

.highlighted { 
    background: yellow; 
}

JSFIDDLE

来源

2015-09-29 14:07:20 Rafa

那是因为你与background-image混合background-color。图像属性具有优先权，所以图像将覆盖颜色。如果是这样的问题，你可以做一些事情来改变这一点：

1 - 更改CSS hightlight到：

.highlighted 
     { 
      background-image:none; 
      background-color: yellow; 
     }

2 - 或创建新的CSS类混合的.highlighted和。黑色，如：

.black.highlighted 
     { 
      background-image:none; 
     }

来源

2015-09-29 14:39:51

课程改变了，但后台不会，为什么不改变？

回答

相关问题