想要在单击时在图像周围添加边框，并在第二次单击后删除边框

时间：2018-06-30 18:43:30

标签： javascript html css border

我要这样做，所以当您单击图像时，边框会显示出来，然后再次单击时，边框会消失。我尝试了许多不同的方法，但是首先我不知道如何使图像最初显示时没有边框（仅当单击它们时边框消失了）。从那里开始单击时我想边框/消失。

此外，我知道您可以在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!");

});

4 个答案:

答案 0 :(得分：1)

使用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>

答案 1 :(得分：1)

您可以将 $(function(){ var n = 0; setInterval(function(){ $('.dots ul li').eq(n).addClass('active').siblings().removeClass('active'); if (++n >= $('.dots ul li').length) n = 0; }, 5000); }); 与JQuery结合使用来处理删除和添加类。请参阅我放在一起的JSFiddle。 https://jsfiddle.net/xpvt214o/334757/

在JQuery中，您可以创建一个点击处理程序，以使用.toggleClass

定位您要单击的确切框。

示例：

$(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

这样分配。希望这可以帮助。

答案 2 :(得分：1)

在您仍在学习的过程中，尽管可以使用更好的方法，但我有一个简单的解决方案，但是绝对可以帮助您了解正在发生的事情。我对您的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>

答案 3 :(得分：1)

$(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>

相关问题
最新问题