单击图像时想要边框，第二次单击后删除边框

我想让它在你点击一个图像时显示一个边框，然后当你第二次点击它时，它就会消失。我已经尝试了许多不同的方法，但首先我不知道如何让图像最初在没有边框的情况下显示(只有当您单击它们时，边框才会消失(。从那里开始，当我想在单击时边框/消失时。

另外，我知道你可以在 JS 中进行内联 css 样式，但我不想这样做。如果需要，请告诉我。我还在学习！

http://jsbin.com/joxuyez/1/edit?html,css,js,output

.HTML

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Practice Refactoring to jQuery">
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>Practice Refactoring to jQuery</title>
</head>
<body>
<div id="refrigerator">
<div class="oranges">
<img src="https://whydyoueatthat.files.wordpress.com/2011/12/oranges-vitamin-c-lg.jpg">
</div>
<div class="apples">
<img src="http://lymanorchards.com/files/7013/6725/1487/apples.jpg">
</div>
<div class="grapes">
<img src="https://images.homedepot-static.com/productImages/23e05da4-8bdf-4408-8ca0-e9c8c9a780df/svn/van-zyverden-fruit-trees-plants-11425-64_1000.jpg">
</div>
</div>
</body>
</html>

.CSS

#refrigerator {
background-color: #FFFFFF;
width: 200px;
border: 5px solid #333333;
}
#refrigerator img {
width: 100px;
display: block;
margin: 30px auto;
}
.oranges {
border: 5px solid orange;
}      
.apples {
border: 5px solid red;
} 
.grapes {
border: 5px solid purple;
}

.JS

$(document).ready(function() {
alert("Pick a healthy snack from the refrigerator!");
});
$('.oranges').click (function(event) {
$('.oranges').css("border","none");
alert("You chose an orange!");    
});
$('.apples').click (function(event) {
alert("You chose an apple!");       
});
$('.grapes').click (function(event) {
alert("You chose grapes!");
});

只需使用toggleClass()每次单击即可切换一个类。

在这里，我稍微更新了您的 CSS，并缩短了脚本，以显示操作方法。

为什么已经设置了边框，并且只是更改颜色，则可以避免元素移动，否则在更改其大小时默认情况下会移动。

堆栈代码段

$(document).ready(function() {
//alert("Pick a healthy snack from the refrigerator!");
});
$('.oranges, .apples, .grapes').click( function(event) {
$(this).toggleClass("showborder");

if (this.className.includes('showborder')) {
alert("You selected " + this.className.replace(" showborder","") )
}
});

#refrigerator {
background-color: #FFFFFF;
width: 200px;
border: 5px solid #333333;
}
#refrigerator img {
width: 100px;
display: block;
margin: 30px auto;
}
.oranges, .apples, .grapes {
border: 5px solid transparent;
}
.oranges.showborder {
border-color: orange;
}
.apples.showborder {
border-color: red;
}
.grapes.showborder {
border-color: purple;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="refrigerator">
<div class="oranges">
<img src="https://whydyoueatthat.files.wordpress.com/2011/12/oranges-vitamin-c-lg.jpg">
</div>
<div class="apples">
<img src="http://lymanorchards.com/files/7013/6725/1487/apples.jpg">
</div>
<div class="grapes">
<img src="https://images.homedepot-static.com/productImages/23e05da4-8bdf-4408-8ca0-e9c8c9a780df/svn/van-zyverden-fruit-trees-plants-11425-64_1000.jpg">
</div>
</div>

根据评论更新。

如果你一次只允许一个，你可以做这样的事情

堆栈代码段

$(document).ready(function() {
//alert("Pick a healthy snack from the refrigerator!");
});
$('.oranges, .apples, .grapes').click(function(event) {
if ($(this).hasClass("showborder")) {
$(this).removeClass("showborder");
} else {
$(this).parent().find(".showborder").removeClass("showborder");
$(this).addClass("showborder");
if (this.className.includes('showborder'))
alert("You selected " + this.className.replace(" showborder","") )
}
});

#refrigerator {
background-color: #FFFFFF;
width: 200px;
border: 5px solid #333333;
}
#refrigerator img {
width: 100px;
display: block;
margin: 30px auto;
}
.oranges,
.apples,
.grapes {
border: 5px solid transparent;
}
.oranges.showborder {
border-color: orange;
}
.apples.showborder {
border-color: red;
}
.grapes.showborder {
border-color: purple;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="refrigerator">
<div class="oranges">
<img src="https://whydyoueatthat.files.wordpress.com/2011/12/oranges-vitamin-c-lg.jpg">
</div>
<div class="apples">
<img src="http://lymanorchards.com/files/7013/6725/1487/apples.jpg">
</div>
<div class="grapes">
<img src="https://images.homedepot-static.com/productImages/23e05da4-8bdf-4408-8ca0-e9c8c9a780df/svn/van-zyverden-fruit-trees-plants-11425-64_1000.jpg">
</div>
</div>

您可以使用 JQuery 的.toggleClass来处理删除和添加类。参考我整理的这个JSFiddle。https://jsfiddle.net/xpvt214o/334757/

在 JQuery 中，您可以创建一个单击处理程序来定位您正在单击的确切框$(this)

例：

var box = $(".box")
box.on("click", function(){
$(this).toggleClass('border')
})

如果你需要每个盒子都是不同的颜色，你可以做这样的事情：

.box.border{
border-width: 3px;
border-style: solid;
}
.box1{
border-color: orange;
}
.box2{
border-color: red;
}
.box3{
border-color: blue;
}

使用此方法，您可以拥有一个控制边框样式和宽度的.border类。不同的类(如.box1(可以更改边框颜色。

<div>
<div class="box box1">box 1</div>
<div class="box box2">box 2</div>
<div class="box box3">box 31</div>
</div>

像那样分配。希望这有帮助。

由于您仍在学习，因此我以简单的方式为您提供了解决方案，尽管有更好的方法可用，但这种方法肯定会帮助您了解正在发生的事情。我已经在您的 CSS 和 JS 文件中进行了一些更改。

它也可以在 https://jsfiddle.net/9s37v6tu/11/

$(document).ready(function() {
alert("Pick a healthy snack from the refrigerator!");
});
$('.oranges').click (function(event) {
		if($('.oranges').hasClass('orange-border'))
{
			    $('.oranges').removeClass('orange-border');
}
else
{
	$('.oranges').addClass('orange-border');
}
alert("You chose an orange!");    
});
$('.apples').click (function(event) {
		if($('.apples').hasClass('apple-border'))
{
			    $('.apples').removeClass('apple-border');
}
else
{
	$('.apples').addClass('apple-border');
}
alert("You chose an apple!");       
});
$('.grapes').click (function(event) {

		if($('.grapes').hasClass('grape-border'))
{
			    $('.grapes').removeClass('grape-border');
}
else
{
	$('.grapes').addClass('grape-border');
}
alert("You chose grapes!");
});

#refrigerator {
background-color: #FFFFFF;
width: 200px;
border: 5px solid #333333;
}
#refrigerator img {
width: 100px;
display: block;
margin: 30px auto;
}
.orange-border {
border: 5px solid orange;
}      
.apple-border {
border: 5px solid red;
} 
.grape-border {
border: 5px solid purple;
}

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Practice Refactoring to jQuery">
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>Practice Refactoring to jQuery</title>
</head>
<body>
<div id="refrigerator">
<div class="oranges">
<img src="https://whydyoueatthat.files.wordpress.com/2011/12/oranges-vitamin-c-lg.jpg">
</div>
<div class="apples">
<img src="http://lymanorchards.com/files/7013/6725/1487/apples.jpg">
</div>
<div class="grapes">
<img src="https://images.homedepot-static.com/productImages/23e05da4-8bdf-4408-8ca0-e9c8c9a780df/svn/van-zyverden-fruit-trees-plants-11425-64_1000.jpg">
</div>
</div>
</body>
</html>

$(function(){
$('.box').click(function(){
$('.main div').removeClass('border');
$(this).addClass('border');

var index = $(this).index();
if(index == 0){alert('YOU CLICKED RED BOX!!!');};
if(index == 1){alert('YOU CLICKED GREEN BOX!!!');};
if(index == 2){alert('YOU CLICKED BLUE BOX!!!');};
});
});

.box{
display:inline-block;
width:100px;
height:100px;
margin:10px;
}
.red{
background:red;
}
.green{
background:green;
}
.blue{
background:blue;
}
.border{
border:5px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div class="main">
<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>
</div>
</body>
</html>

相关内容

最新更新

热门标签：