Хотите, чтобы рамка вокруг изображения была нажата, а рамка удалена после повторного нажатия - PullRequest
Новая
       6

Хотите, чтобы рамка вокруг изображения была нажата, а рамка удалена после повторного нажатия

0 голосов
/ 30 июня 2018

Я хочу сделать так, чтобы при нажатии на изображение отображалась граница, а затем при повторном щелчке по ней изображение исчезает. Я пробовал много разных способов, но сначала я не могу понять, как заставить изображения показываться изначально без границ (только когда вы нажимаете на них, граница исчезает). Оттуда, когда я хочу границу / исчезнуть при нажатии на.

Кроме того, я знаю, что вы можете делать встроенные CSS-стили в JS, но я не хочу этого делать. Если это необходимо, то дайте мне знать. Я все еще учусь!

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 голосов
/ 30 июня 2018 

$(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>
0 голосов
/ 30 июня 2018

вы можете использовать .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>

Назначается так. Надеюсь это поможет.

0 голосов
/ 30 июня 2018

Поскольку вы все еще учитесь, у меня есть простое решение для вас, хотя доступны лучшие методы, но определенно этот метод поможет вам понять, что происходит. Я сделал пару изменений в вашем файле 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>
0 голосов
/ 30 июня 2018

Просто переключайте класс при каждом нажатии, используя 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>
...