jquery позволяет выбирать только один элемент div одновременно по щелчку

#javascript #jquery #css

Вопрос:

Я разработал некоторую разметку, в которой пользователь может выбрать DIV, и он отображается выделенным.. это работает нормально, однако я хочу, чтобы одновременно выделялся и выбирался только один DIV.. в настоящее время пользователь может выбрать все 3 раздела, и все они будут выделены. Я использую jquery toggleClass для добавления / удаления «активного» класса в DIV. «активный» класс стилизован в css для отображения синего фона.

как я могу запретить пользователям выбирать все 3?

 $('.pricecard.aircraft').click(function() {
  // this will fire when you click view
  $(this).toggleClass('active');
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4 my-1">
  <div class="card pricecard aircraft active h-100">
    <div class="card-body">
      <span class="price1">£20,944</span></p>
    </div>
  </div>
</div>
<div class="col-sm-4 my-1">
  <div class="card pricecard aircraft h-100">
    <div class="card-body">
      <span class="price2">£20,944</span></p>
    </div>
  </div>
</div>
<div class="col-sm-4 my-1">
  <div class="card pricecard aircraft h-100">
    <div class="card-body">
      <span class="price3">£20,944</span></p>
    </div>
  </div>
</div>

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

Ответ №1:

Для достижения вашей цели вызовите removeClass() все остальные .pricecard.aircraft элементы, которые не являются тем, на который был нажат:

 let $divs = $('.pricecard.aircraft').click(function() {
  $divs.not(this).removeClass('active');
  $(this).toggleClass('active');
});

 .active { color: #C00; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4 my-1">
  <div class="card pricecard aircraft active h-100">
    <div class="card-body">
      <span class="price1">£20,944</span>
    </div>
  </div>
</div>
<div class="col-sm-4 my-1">
  <div class="card pricecard aircraft h-100">
    <div class="card-body">
      <span class="price2">£20,944</span>
    </div>
  </div>
</div>
<div class="col-sm-4 my-1">
  <div class="card pricecard aircraft h-100">
    <div class="card-body">
      <span class="price3">£20,944</span>
    </div>
  </div>
</div>

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

1. спасибо @Rory, как мне скопировать выбранный DIV в раздел DIV под ним .. т.е. Есть еще одна копия 3-х разделов с другим классом ниже, и я хочу скопировать то, что выбрано, в нижеприведенные разделы?

2. clone() и append() должен быть в состоянии справиться с этим, но это зависит от вашего точного HTML. Я бы предложил начать новый вопрос об этом, включая все соответствующие контейнеры.

Ответ №2:

Просто используя HTML и CSS, JavaScript не требуется.

 [name="price"]:checked   label > div {
  background-color: yellow;
}

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />

<input type="radio" name="price" id="price1" value="20944" class="d-none"/>
<label class="col-sm-4 my-1 d-inline-block" for="price1">
  <div class="card pricecard aircraft active h-100">
    <div class="card-body">
      <span class="price1">£20,944</span></p>
    </div>
  </div>
</label>
<input type="radio" name="price" id="price2" value="20944" class="d-none"/>
<label class="col-sm-4 my-1 d-inline-block" for="price2">
  <div class="card pricecard aircraft h-100">
    <div class="card-body">
      <span class="price2">£20,944</span></p>
    </div>
  </div>
</label>
<input type="radio" name="price" id="price3" value="20944" class="d-none"/>
<label class="col-sm-4 my-1 d-inline-block" for="price3">
  <div class="card pricecard aircraft h-100">
    <div class="card-body">
      <span class="price3">£20,944</span></p>
    </div>
  </div>
</label>

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

Ответ №3:

Вы можете использовать:

 $('.pricecard.aircraft').click(function() {
  $('.pricecard.aircraft').removeClass('active');
  $(this).addClass('active');
})

 .pricecard.aircraft.active {
  background-color: yellow
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4 my-1">
  <div class="card pricecard aircraft active h-100">
    <div class="card-body">
      <span class="price1">£20,944</span></p>
    </div>
  </div>
</div>
<div class="col-sm-4 my-1">
  <div class="card pricecard aircraft h-100">
    <div class="card-body">
      <span class="price2">£20,944</span></p>
    </div>
  </div>
</div>
<div class="col-sm-4 my-1">
  <div class="card pricecard aircraft h-100">
    <div class="card-body">
      <span class="price3">£20,944</span></p>
    </div>
  </div>
</div>

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

Это работает!