如何使用事件处理程序操作框阴影的颜色

我正在构建一个应用程序，该应用程序在带有框阴影的弹性框中包含六个不同的主题。

我的目标是使用事件处理程序操作框阴影的颜色，以便框阴影颜色将更改并与最终用户选择的任何主题的按钮颜色匹配。（例如，如果用户单击主题"技术"的按钮，框阴影应从 #D1D1D1 更改为 #6699FF）

我在MDN和Treehouse上花了几个小时试图找到解决方案，但无济于事。

我在这个问题中发布的jQuery无法正确执行，我真的可以使用一些帮助！

这是我到目前为止编译的内容：

$(“.buttons”).click(function(){
  var color = $(this).css(“background-color”);
  var box-shadow = “0 5px” + color;
  $(this).parent().css("box-shadow”);
});

/* =================================
  Page Styles
==================================== */
* {
	box-sizing: border-box;
}
body {
	font-size: 1.2em;
	font-family: 'Varela Round', sans-serif;
	color: #fff;
	background: #f2f2f2;
	padding-left: 5%;
	padding-right: 5%;
}
header {
	text-align: center;
	color: #000;
	font-size: 1.2em;
}
.topics {
	padding: 10px;
	background: #fff;
  border-radius: 25px;
	margin: 45px auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	text-align: center;
	box-shadow: 0 2.5px 0 0 #d1d1d1;
}
.technology {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #6699FF;
	border-radius: 3px;
}
.business {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #32BC67;
	border-radius: 3px;
}
.entertainment {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #9F60FF;
	border-radius: 3px;
}
.shopping {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #F44658;
	border-radius: 3px;
}
.sports {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #FE9900;
	border-radius: 3px;
}
.weather {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #FFC100;
	border-radius: 3px;
}
/* =================================
  Flexbox
==================================== */
.articles {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    background: #fff;
    border-radius: 25px;
    flex-wrap: wrap;
    justify-content: space-around;
    text-align: left;
    box-shadow: 0 0 10px #D1D1D1;
}
.article-1 {
  display: table-cell;
  background-color: #fff;
  width: 300px;
  height: 200px;
  border-radius: 3px;
  border-color: #D1D1D1;
  border-width: 1px;
  padding: 50px;
  margin: 25px;
  box-shadow: 2px 2px 10px #D1D1D1;
}
.article-2 {
		display: table-cell;
    background-color: #fff;
    width: 300px;
    height: 200px;
		border-radius: 3px;
    border-color: #D1D1D1;
    border-width: 1px;
    padding: 50px;
    margin: 25px;
    box-shadow: 2px 2px 10px #D1D1D1;
}
.article-3 {
		display: table-cell;
    background-color: #fff;
    width: 300px;
    height: 200px;
		border-radius: 3px;
    border-color: #D1D1D1;
    border-width: 1px;
    padding: 50px;
    margin: 25px;
    box-shadow: 2px 2px 10px #D1D1D1;
}

<!DOCTYPE html>
<html>
<head>
	<title>Daily News</title>
	<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="css/page.css">
	<link rel="stylesheet" href="css/flexbox.css">
</head>
<body>
	<header>
	</header>
	<nav class="topics">
		<nav class="technology">Technology</nav>
		<nav class="business">Business</nav>
		<nav class="entertainment">Entertainment</nav>
		<nav class="shopping">Shopping</nav>
		<nav class="sports">Sports</nav>
		<nav class="weather">Weather</nav>
	</nav>
	<section class="articles">
	<section class=article-1>
	</section>
	<section class=article-2>
	</section>
	<section class=article-3>
	</section>
	</section>
</body>
</html>

您忘记将类添加到按钮buttons并且您也使用.css()方法有点错误：它应该是.css("box-shadow", boxShadow);的。你的代码还有更多一些小问题，所以这里是工作示例：

$(".buttons").click(function(){
  var color = $(this).css("background-color");
  var boxShadow = "0 5px " + color;
  $(this).parent().css("box-shadow", boxShadow);
});

/* =================================
  Page Styles
==================================== */
* {
	box-sizing: border-box;
}
body {
	font-size: 1.2em;
	font-family: 'Varela Round', sans-serif;
	color: #fff;
	background: #f2f2f2;
	padding-left: 5%;
	padding-right: 5%;
}
header {
	text-align: center;
	color: #000;
	font-size: 1.2em;
}
.topics {
	padding: 10px;
	background: #fff;
  border-radius: 25px;
	margin: 45px auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	text-align: center;
	box-shadow: 0 2.5px 0 0 #d1d1d1;
}
.technology {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #6699FF;
	border-radius: 3px;
}
.business {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #32BC67;
	border-radius: 3px;
}
.entertainment {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #9F60FF;
	border-radius: 3px;
}
.shopping {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #F44658;
	border-radius: 3px;
}
.sports {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #FE9900;
	border-radius: 3px;
}
.weather {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #FFC100;
	border-radius: 3px;
}
/* =================================
  Flexbox
==================================== */
.articles {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    background: #fff;
    border-radius: 25px;
    flex-wrap: wrap;
    justify-content: space-around;
    text-align: left;
    box-shadow: 0 0 10px #D1D1D1;
}
.article-1 {
  display: table-cell;
  background-color: #fff;
  width: 300px;
  height: 200px;
  border-radius: 3px;
  border-color: #D1D1D1;
  border-width: 1px;
  padding: 50px;
  margin: 25px;
  box-shadow: 2px 2px 10px #D1D1D1;
}
.article-2 {
		display: table-cell;
    background-color: #fff;
    width: 300px;
    height: 200px;
		border-radius: 3px;
    border-color: #D1D1D1;
    border-width: 1px;
    padding: 50px;
    margin: 25px;
    box-shadow: 2px 2px 10px #D1D1D1;
}
.article-3 {
		display: table-cell;
    background-color: #fff;
    width: 300px;
    height: 200px;
		border-radius: 3px;
    border-color: #D1D1D1;
    border-width: 1px;
    padding: 50px;
    margin: 25px;
    box-shadow: 2px 2px 10px #D1D1D1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<title>Daily News</title>
	<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="css/page.css">
	<link rel="stylesheet" href="css/flexbox.css">
</head>
<body>
	<header>
	</header>
	<nav class="topics">
		<nav class="technology buttons">Technology</nav>
		<nav class="business buttons">Business</nav>
		<nav class="entertainment buttons">Entertainment</nav>
		<nav class="shopping buttons">Shopping</nav>
		<nav class="sports buttons">Sports</nav>
		<nav class="weather buttons">Weather</nav>
	</nav>
	<section class="articles">
	<section class=article-1>
	</section>
	<section class=article-2>
	</section>
	<section class=article-3>
	</section>
	</section>
</body>
</html>

如果必须：

$(“.buttons”).click(function(){
  var color = $(this).css(“background-color”);
  var box-shadow = “0 5px” + color;
  $(this).parent().css("box-shadow”);
});

应该更像

$('.buttons').click(function(){
  var t = $(this);
  t.parent().css('boxShadow', '0 5px '+t.css('backgroundColor'));
});

只需一个 String 参数.css()即可获得单个样式属性。它使用两个参数分配一个样式属性。使用 Object 作为参数时，它会循环访问 Object，并分配多个样式属性。

相关内容

最新更新

热门标签：