爲什麼我的清除按鈕/懸停在改變顏色後工作？

我正試圖做一個草圖懸停的應用程序。當光標懸停在網格正方形上時，正方形會填滿當前拾取的顏色，當您將鼠標懸停在正方形上時，顏色會被移除。爲什麼我的清除按鈕/懸停在改變顏色後工作？

最初的一切似乎工作。我可以將鼠標懸停在正方形上應用red color，然後重新懸停以將其移除或按clear button清除所有內容。但是當我改變顏色爲例如，我無法通過懸停移除顏色，而clear button也不起作用。這是爲什麼發生？

http://codepen.io/cgonen/full/zNQMMY/ < =指向懸停應用的鏈接。

$(function() { 
 
    
 
    grid() 
 
    clear() 
 
    createGrid() 
 
    hover() 
 
    colorpick() 
 
}) 
 

 

 
function createGrid(size) { 
 
     $('.grid').empty() 
 
     size = 16; 
 
     width = 600/size; 
 
     for (var j = 0; j < size; j++) { 
 
      for (var i = 0; i < size; i++) { 
 
       $('.grid').append('<div class="vlak"></div>') 
 
      } 
 
     } 
 
      $('.vlak').css("width", width) 
 
      $('.vlak').css("height", width) 
 
     
 
    } // end 
 

 

 
function grid() { 
 
    $('input').on('change', function() { 
 
     size = $('input').val(); 
 

 
     createGrid(size) 
 
    }) 
 
} 
 

 
function hover(c) { 
 
    $('.vlak').on('mouseenter', function(){ 
 

 
     
 
     console.log(c) 
 
     if($(this).hasClass('color')) { 
 
      $(this).removeClass('color') 
 
     } else { 
 
      $(this).addClass('color'); 
 
      $('.color').css('background-color', c) 
 
     } 
 

 
    }) 
 
} 
 

 
function colorpick() { 
 
    $('select').on('change', function(){ 
 
     var c = $(this).val() 
 
     $('.vlak').off() 
 
     hover(c) 
 
    }) 
 
} 
 

 
function clear() { 
 
    $('button').on('click', function(){ 
 
    $('.vlak').removeClass('color') 
 
    }) 
 
}

html { 
 
    box-sizing: border-box; } 
 

 
*, *:before, *:after { 
 
    box-sizing: inherit; } 
 

 
.clearfix:before, 
 
.clearfix:after { 
 
    content: ""; 
 
    display: block; 
 
    clear: both; } 
 

 
.wrapper { 
 
    width: 600px; 
 
    margin: 0 auto; } 
 

 
.grid { 
 
    box-sizing: content-box; 
 
    line-height: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    outline: 1px solid black; } 
 

 
.vlak { 
 
    box-sizing: border-box; 
 
    float: left; 
 
    width: 50px; 
 
    height: 50px; 
 
    line-height: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 1px solid black; } 
 

 
.color { 
 
    background-color: red; } 
 

 
.black { 
 
    background-color: black; } 
 

 
.red { 
 
    background-color: red; } 
 

 
.blue { 
 
    background-color: blue; } 
 

 
.pink { 
 
    background-color: pink; } 
 

 
.green { 
 
    background-color: green; } 
 

 
.yellow { 
 
    background-color: yellow; }

<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content = "width=device-width", initiat-scale="1.0"> 
 
    <title>Document</title> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
 
    <link rel="stylesheet" href="styles/styles.css"> 
 
</head> 
 
    
 
<body> 
 
    
 
    <div class="wrapper"> 
 

 
     <div class="header"> 
 
      <h1>HoverMatic</h1> 
 
      <p>General description placeholder</p> 
 
      <input type="number" value="16" placeholder="grid size"> 
 
      <select name="colors" id=""> 
 
       <option value="black">black</option> 
 
       <option value="blue">blue</option> 
 
       <option value="green">green</option> 
 
       <option value="pink">pink</option> 
 
       <option value="red">red</option> 
 
       <option value="yellow">yellow</option> 
 
      </select> 
 
      <button>clear grid</button> 
 
     </div> 
 
     <div class="grid clearfix"></div> 
 
    </div> 
 
    
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="scripts/main.js"></script> 
 
</body>

來源

2017-02-18 Hyrule

請出示相關代碼的問題 –

要是一個codepen但現在藏漢添加的代碼段。 – Hyrule

您忘記清除風格backgound試試這個

function clear() { 
     $('button').on('click', function(){ 
      $('.vlak').removeClass('color') 
      $('.vlak').css({'background-color':'inherit'}) 
     }) 
    }

來源

2017-02-18 16:00:12

嗯..你是什麼意思與清晰的風格背景？這適用於清晰的按鈕部分，但我不明白爲什麼$（'。vlak'）。css（{'background-color'：'inherit'}會這樣做。 – Hyrule

你編輯你的問題，你的第一個問題是當你改變顏色並按下清除按鈕時如何去除顏色 –

是的，我很抱歉，選擇了一個不好的標題編輯以更好地適合我的問題'爲什麼'部分對學習很重要 – Hyrule

@jorges回答修復該問題的一個組成部分。您還需要添加：

$(this).css({'background-color': 'inherit'})

在懸停功能

$(this).removeClass('color')之後。

，然後替換行44： $('.color').css({'background-color': c})

來源

2017-02-18 16:12:46

爲什麼我的清除按鈕/懸停在改變顏色後工作？

回答

相關問題