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

【问题标题】：Want a border around image when clicked on and the border removed after clicked on the second time单击时想要图像周围的边框，第二次单击后删除边框
【发布时间】：2018-07-04 22:57:41
【问题描述】：

我想这样做，当您单击图像时，边框会显示，然后当您第二次单击它时它会消失。我尝试了许多不同的方法，但首先我不知道如何让图像最初显示没有边框（只有当你点击它们时，边框才会消失）。从那里我想在点击时边框/消失。

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

});

【问题讨论】：

    标签： javascript html css border


    【解决方案1】：

    使用toggleClass() 只需在每次点击时切换一个类。

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

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

    堆栈sn-p

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

    根据评论更新。

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

    堆栈sn-p

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

    【讨论】：

    • @rainbowpudding 不客气……现在你也可以投票给答案了 ;)
    • 完成。如果我想允许一次只选择一张图片。例如：我选择橙色然后苹果，只有苹果显示为选中（不是两者）。我是否使用 .removeClass() 方法？
    • @rainbowpudding 添加了第二个示例来展示如何做到这一点。
    【解决方案2】：

    您可以使用 .toggleClass 和 JQuery 来处理删除和添加类。请参阅我放在一起的这个 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>

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

    【讨论】：

    • 确实如此，绝对给了我一种新的方式！
    【解决方案3】：

    由于您仍在学习，我以一种简单的方式为您提供了解决方案，尽管有更好的方法可用，但这种方法肯定会帮助您了解正在发生的事情。我对您的 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>

    【讨论】：

    • 我还在学习！谢谢你，它确实帮助我更多地了解正在发生的事情。
    【解决方案4】： 

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

    【讨论】：

    • 感谢您的回复！
    猜你喜欢
    • 2018-04-03
    • 2015-08-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-05-15
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode