Как мне сделать так, чтобы мой код с множественным выбором, написанный на CSS и JS, выбирал только один вариант? В настоящее время я могу выбрать оба

ProgramBox

Как мне сделать так, чтобы мой код с множественным выбором, написанный на CSS и JS, выбирал только один вариант? В настоящее время я могу выбрать оба

Post author:admin
Запись опубликована:23 августа, 2022
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

Здесь у меня возникли небольшие проблемы, и я уверен, что это легко исправить. Я очень неопытен в Javascript и пытаюсь научиться кодировать более привлекательные сайты.

В основном я использую этот код для выбора iOS или Android, но я хочу иметь возможность выбирать только один или другой. Вместо этого я могу выбрать оба. Может кто-нибудь, пожалуйста, помочь объяснить, как выбрать один или другой? Предпочтительно, чтобы при выборе одного он автоматически отменял выбор другого, если другой уже выбран. Я был бы очень признателен за помощь! Большое вам спасибо.

https://codepen.io/cmpackagingllc/pen/JVLPjq

HTML

 <h1>Device</h1>
<div class="wrap">
  <ul>
    <li><i class="fa fa-apple"></i></li>
    <li><i class="fa fa-android"></i></li>
  </ul>
</div>

CSS

 @import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);

* {
  box-sizing: border-box;
}
body {
  font-family: 'Lato', sans-serif;
  background: #222;
}

h1 {
  text-align: center;
  margin-top: 50px;
  color: tomato;
  font-weight: 300;
  word-spacing: 14px;
  text-transform: uppercase;
}
.wrap {
  width: 400px;
  height: 300px;
  margin: 0px auto;
}
ul {
  margin: 0; 
  padding: 0;
  list-style: none;
  width: 100%;
  height: 100%;
}
ul li {
  display: block;
  width: 50%;
  height: 50%;
  line-height: 150px;
  font-size: 40px;
  color: #fff;
  text-align: center;
  float: left;
  position: relative;
}
.borderOverlay {
  width: 70%;
  height: 70%;
  background: rgba(255, 255, 255, .1);
  border: 3px solid tomato;
  border-radius: 10px;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
  animation: 0.25s enter;
}
.borderOverlay i {
  position: absolute;
  font-size: 29px;
  color: #222;
  top: -15px;
  right: -13px;
  background: #fff;
  padding: 1px;
  border-radius: 50%;
  animation: 0.75s enter2;
}

@keyframes enter {
  0% {
    transform: scale(0) rotate(-90deg);
  }

  100% {
     transform: scale(1);
  }
}
@keyframes enter2 {
    0% {
     transform: scale(0);
  }
  50% {
     transform: scale(0);
  }
  75% {
     transform: scale(1.25);
  }
  100% {
     transform: scale(1);
  }
}

Javascript

 $("li").click(function () {
  if($(this).find('.borderOverlay').length) {
    $(this).find('.borderOverlay').remove();
  } else {
    $(this).append('<div class="borderOverlay"><i class="fa fa-check"></i></div>');
  }
});

1. Проверьте radio buttons ( developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio ) Они вам понравятся.

2. Я не уверен, что это то, что я ищу, я посмотрю, смогу ли я скопировать свой стиль, хотя. Я ценю это. Я дам вам знать, если это сработает. Просто не хотелось бы начинать все сначала.

Ответ №1:

 $("li").click(function () {
  var isActive = $(this).find('.borderOverlay').length;
  $('.borderOverlay').remove();
  if(!isActive) {
    $(this).append('<div class="borderOverlay"><i class="fa fa-check"></i></div>');
  }
});

Ответ №2:

Вам просто нужно удалить другие .borderOverlay .

Вы можете сделать это с помощью $(this).siblings() , и это позволит выбрать все остальные li , кроме того, на который был нажат.

 $("li").click(function () {
  if($(this).find('.borderOverlay').length) {
    $(this).find('.borderOverlay').remove();
  } else {
    $(this).append('<div class="borderOverlay"><i class="fa fa-check"></i></div>');
    $(this).siblings().find('.borderOverlay').remove();
  }
});

 @import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);

* {
  box-sizing: border-box;
}
body {
  font-family: 'Lato', sans-serif;
  background: #222;
}

h1 {
  text-align: center;
  margin-top: 50px;
  color: tomato;
  font-weight: 300;
  word-spacing: 14px;
  text-transform: uppercase;
}
.wrap {
  width: 400px;
  height: 300px;
  margin: 0px auto;
}
ul {
  margin: 0; 
  padding: 0;
  list-style: none;
  width: 100%;
  height: 100%;
}
ul li {
  display: block;
  width: 50%;
  height: 50%;
  line-height: 150px;
  font-size: 40px;
  color: #fff;
  text-align: center;
  float: left;
  position: relative;
}
.borderOverlay {
  width: 70%;
  height: 70%;
  background: rgba(255, 255, 255, .1);
  border: 3px solid tomato;
  border-radius: 10px;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
  animation: 0.25s enter;
}
.borderOverlay i {
  position: absolute;
  font-size: 29px;
  color: #222;
  top: -15px;
  right: -13px;
  background: #fff;
  padding: 1px;
  border-radius: 50%;
  animation: 0.75s enter2;
}

@keyframes enter {
  0% {
    transform: scale(0) rotate(-90deg);
  }

  100% {
     transform: scale(1);
  }
}
@keyframes enter2 {
    0% {
     transform: scale(0);
  }
  50% {
     transform: scale(0);
  }
  75% {
     transform: scale(1.25);
  }
  100% {
     transform: scale(1);
  }
}

 <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

<h1>Device</h1>
<div class="wrap">
  <ul>
    <li><i class="fa fa-apple"></i></li>
    <li><i class="fa fa-android"></i></li>
  </ul>
</div>

Развернуть фрагмент

1. Это здорово, я нашел два решения. Я не знал о $ (this). братья и сестры (). Это кажется лучшим способом сделать это, хотя оба ответа работают феноменально. Это очень ценится.

Ответ №3:

Есть причина, по которой семантический HTML — это вещь — есть элемент, который делает это изначально — тип ввода =»radio».

 <h1>Device</h1>
<div class="wrap">
  <label>
    <input type="radio" class="myRadio" name="myRadio"/>
    <i class="fa fa-apple"></i>
    <div class="borderOverlay"></div>
  </label>
  <label>
    <input type="radio" class="myRadio" name="myRadio"/>
    <i class="fa fa-android"></i>
    <div class="borderOverlay"></div>
  </label>
</div>

Мы помещаем их в метку, поэтому щелчок в любом месте метки запускает радио.
При нажатии на радио все остальные радиостанции с тем же «именем» будут обновлены.
Это также будет принимать ввод из пробела / ввода, а не только щелчок (как это делают элементы <button> ). Простое добавление списка событий ‘click’ также будет применяться к этим ключам.
А также фокусируется с помощью навигации по клавиатуре (с помощью клавиши Tab), что довольно важно, но слишком часто опускается.

Вы можете легко скрыть фактические кнопки:

 .wrap > label{
  position: relative;
}

.myRadio {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

А также стилизовать их непосредственно с помощью чистого CSS:

 .myRadio:checked ~ .borderOverlay {
  /* rules for showing borderOverlay animation */
}

И зацикливать их при возникновении изменений:

 var radioButtons = Array.from(document.getElementsByClassName('myRadio'));

radioButtons.map(function(radio){
  radio.addEventListener('change', function(e){
    var selectedTarget = radioButtons.filter(btn => btn.checked)[0];
    // do something with **selectedTarget**
  };
});

Метки: выбирал только один вариант? В настоящее время я могу выбрать оба, Как мне сделать так, написанный на CSS и JS, чтобы мой код с множественным выбором