个人中心
gpt4 book ai didi

javascript - 为什么我的清除按钮/悬停在更改颜色后不起作用？

转载 作者：行者123 更新时间：2023-12-03 04:58:53 24 4
gpt4 key购买 nike

我正在尝试制作一个草图悬停应用程序。当光标悬停在网格方 block 上时，该方 block 将填充当前选取的颜色，当您再次将鼠标悬停在其上时，颜色将被删除。

最初一切似乎都正常。我可以将鼠标悬停在一个正方形上以应用红色，然后重新悬停以将其删除，或者按清除按钮以清除所有内容。但是当我将颜色更改为例如绿色，我无法再通过悬停来删除颜色，并且清除按钮不起作用。为什么会发生这种情况？

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>

最佳答案

@jorges 的答案解决了问题的一部分。您还需要添加:

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

在 $(this).removeClass('color') 之后的悬停函数中。

然后将第 44 行替换为:$('.color').css({'background-color': c})

关于javascript - 为什么我的清除按钮/悬停在更改颜色后不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42317321/

24 4 0
文章推荐： javascript - ionic 工厂未定义
文章推荐： ios - 是否可以在Flutter中更改CupertinoTabBar的高度？
文章推荐： android - gradle的旧版本是必需的错误
文章推荐： flutter - 在小部件构建期间调用setState()
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com