单击时希望图像周围有边框，并在第二次单击后删除边框

Question

我想做到这一点，当你点击一张图片时，边框会显示出来，然后当你第二次点击它时，它就会消失。我尝试了很多不同的方法，但首先我无法弄清楚如何让图像最初显示时没有边框（只有当你点击它们时边框才会消失）。当我想 border/disappear 点击时从那里开始。

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

});

Answer 1

只需使用 toggleClass() 每次点击切换 class。

我在这里稍微更新了您的 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>

Answer 2

您可以使用 .toggleClass 和 JQuery 来处理删除和添加 classes。参考我放在一起的这个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 class 来控制边框的样式和宽度。不同的 class 等 .box1 可以改变边框颜色。

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

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

Answer 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>

Answer 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>

单击时希望图像周围有边框，并在第二次单击后删除边框

Want a border around image when clicked on and the border removed after clicked on the second time

html

javascript

css

border