Добавить активный / отключить дочерний элемент при нажатии

Я работаю над этим простым выбором, который добавляет «активный» класс к элементу, по которому щелкнули мышью, и добавляю класс «отключить» к элементу в противоположном контейнере.

Моя проблема в том, как переместить класс active/disabled из .col-md-5ths в их дочерний элемент .num.

пожалуйста, проверьте код.

Спасибо.

$('.numChoice > .col-md-5ths').click(function() {
    if (!$(this).hasClass('disabled')) {
        var otherSide = $(this).parent().hasClass('first-row') ? '.second-row' : '.first-row';
        var otherElement = $(otherSide).children().removeClass('disabled').eq($(this).index());
        $(this).toggleClass('active').siblings().removeClass('active');
        $(this).hasClass('active') ? otherElement.addClass('disabled') : otherElement.removeClass(
            'disabled');
        $(this).hasClass('disabled') ? otherElement.removeClass('active') : otherElement.removeClass(
            'active');

    } else {
        $(this).removeClass('disabled');
        var otherSide = $(this).parent().hasClass('first-row') ? '.second-row' : '.first-row';
        var otherElement = $(otherSide).children().removeClass('disabled').eq($(this).index());
        $(this).toggleClass('active').siblings().removeClass('active');
        $(this).hasClass('active') ? otherElement.addClass('disabled') : otherElement.removeClass(
            'disabled');
        $(this).hasClass('disabled') ? otherElement.removeClass('active') : otherElement.removeClass(
            'active');

    }

});

.numChoice{
  display: block;
}
.num{
  width: 20px;
  height: 20px;
  background-color: #DDD;
  text-align: center;
  float: left;
  cursor: pointer;
}
.col-md-5ths.active{
    color: green;
}
.col-md-5ths.disabled{
    color: red;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "container">
  <div class = "numChoice first-row">
  <div class = "col-md-5ths">
    <div class = "num">1</div>
  </div>
  <div class = "col-md-5ths">
    <div class = "num">2</div>
  </div>
  <div class = "col-md-5ths">
    <div class = "num">3</div>
  </div>
  <div class = "col-md-5ths">
    <div class = "num">4</div>
  </div>
  <div class = "col-md-5ths">
    <div class = "num">5</div>
  </div>
</div>
  <br><br>
<div class = "numChoice second-row">
  <div class = "col-md-5ths">
    <div class = "num">1</div>
  </div>
  <div class = "col-md-5ths">
    <div class = "num">2</div>
  </div>
  <div class = "col-md-5ths">
    <div class = "num">3</div>
  </div>
  <div class = "col-md-5ths">
    <div class = "num">4</div>
  </div>
  <div class = "col-md-5ths">
    <div class = "num">5</div>
  </div>
</div>
</div>

Не уверен, что вы имеете в виду. Вы хотите щелкнуть .num и изменить родительский класс? Используйте .closest. Также СУХОЙ - не повторяйся. Вы можете использовать toggleClass, чтобы не повторять код.

— 15.11.2018 09:59

Вы злоупотребляете троичными. Просто используйте otherElement.toggleClass(active)

— 15.11.2018 10:01

@mplungjan да, сэр, я бы хотел добавить активный / отключенный класс в .num

— 15.11.2018 10:03

javascript jquery

15.11.2018 09:55

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

117

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Вы можете сделать это так ...

$('.numChoice > .col-md-5ths').click(function(index,el) {
    var thisind = $(this).index() + 1;
    if ($(this).parent().hasClass('first-row')){
      $(this).addClass('active');
      $(this).siblings().removeClass('active');
      $('.second-row .col-md-5ths').removeClass('disabled');
      $('.second-row .col-md-5ths:nth-child('+thisind+')').addClass('disabled');
    }
    else {
      $(this).addClass('disabled');
      $(this).siblings().removeClass('disabled');
      $('.first-row .col-md-5ths:nth-child('+thisind+')').addClass('disabled');
    }
});

.numChoice{
  display: block;
}
.num{
  width: 20px;
  height: 20px;
  background-color: #DDD;
  text-align: center;
  float: left;
  cursor: pointer;
}
.col-md-5ths.active{
    color: green;
}
.col-md-5ths.disabled{
    color: red;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "container">
  <div class = "numChoice first-row">
  <div class = "col-md-5ths">
    <div class = "num">1</div>
  </div>
  <div class = "col-md-5ths">
    <div class = "num">2</div>
  </div>
  <div class = "col-md-5ths">
    <div class = "num">3</div>
  </div>
  <div class = "col-md-5ths">
    <div class = "num">4</div>
  </div>
  <div class = "col-md-5ths">
    <div class = "num">5</div>
  </div>
</div>
  <br><br>
<div class = "numChoice second-row">
  <div class = "col-md-5ths">
    <div class = "num">1</div>
  </div>
  <div class = "col-md-5ths">
    <div class = "num">2</div>
  </div>
  <div class = "col-md-5ths">
    <div class = "num">3</div>
  </div>
  <div class = "col-md-5ths">
    <div class = "num">4</div>
  </div>
  <div class = "col-md-5ths">
    <div class = "num">5</div>
  </div>
</div>
</div>

15.11.2018 10:10

Я создал для вас образец рабочий пример

$('.numChoice > .col-md-5ths').click(function() {
            var otherSide = $(this).parent().hasClass('first-row') ? '.second-row' : '.first-row';
        var otherElement = $(otherSide).children().removeClass('disabled').eq($(this).index());
      var $thisNum = $(this).children();
    if (!$(this).hasClass('disabled')) {    
        $thisNum.toggleClass('active').siblings().removeClass('active');
        $thisNum.hasClass('active') ? otherElement.addClass('disabled') : otherElement.removeClass('disabled');
        $thisNum.hasClass('disabled') ? otherElement.removeClass('active') : otherElement.removeClass('active');
    } else {
        $(this).removeClass('disabled');
        $thisNum.toggleClass('active').siblings().removeClass('active');
        $thisNum.hasClass('active') ? otherElement.addClass('disabled') : otherElement.removeClass('disabled');
        $thisNum.hasClass('disabled') ? otherElement.removeClass('active') : otherElement.removeClass('active');

    }

});

спасибо, сэр, почти здесь, когда я нажимаю на элемент, он добавляет класс active в .num, это правильно. В другом контейнере класс disabled также должен быть в классе .num.

— 15.11.2018 10:21

СУХОЙ: Не повторяйся

— 15.11.2018 10:41

15.11.2018 10:13

Ответ принят как подходящий

Вот более короткая версия

$('.numChoice > .col-md-5ths > .num').on("click", function(e) {
  e.preventDefault(); // stop the link
  var $this = $(this);
  if ($this.is(".disabled")) return; // assuming you cannot click on a disabled
  $this.toggleClass('active');
  var act = $this.is(".active");
  var idx = $this.parent().index();
  var $otherSide = $this.closest(".numChoice").siblings(); // plural but only one
  var $otherElement = $otherSide.find(".num").eq(idx);
  $otherElement.toggleClass('disabled', act);
});

.numChoice {
  display: block;
}

.num {
  width: 20px;
  height: 20px;
  background-color: #DDD;
  text-align: center;
  float: left;
  cursor: pointer;
}

.num.active {
  color: green;
}

.num.disabled {
  color: red;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "container">
  <div class = "numChoice first-row">
    <div class = "col-md-5ths">
      <div class = "num">1</div>
    </div>
    <div class = "col-md-5ths">
      <div class = "num">2</div>
    </div>
    <div class = "col-md-5ths">
      <div class = "num">3</div>
    </div>
    <div class = "col-md-5ths">
      <div class = "num">4</div>
    </div>
    <div class = "col-md-5ths">
      <div class = "num">5</div>
    </div>
  </div>
  <br><br>
  <div class = "numChoice second-row">
    <div class = "col-md-5ths">
      <div class = "num">1</div>
    </div>
    <div class = "col-md-5ths">
      <div class = "num">2</div>
    </div>
    <div class = "col-md-5ths">
      <div class = "num">3</div>
    </div>
    <div class = "col-md-5ths">
      <div class = "num">4</div>
    </div>
    <div class = "col-md-5ths">
      <div class = "num">5</div>
    </div>
  </div>
</div>

Пожалуйста, посмотрите обновление - я думаю, что это лучшая версия

— 16.11.2018 07:20

15.11.2018 10:25

Вы можете добиться этого более простым способом, например следующим образом:

$('.numChoice .num').click(function() {
  $('.num').removeClass('active').removeClass('disabled');
  var parent = $('.first-row').has(this).length == 0?'.first-row' : '.second-row';
  var idx = $(this).parent().index();
  $(this).toggleClass('active');
  $(parent+' .num').eq(idx).toggleClass('disabled');
});

.numChoice{
  display: block;
}
.num{
  width: 20px;
  height: 20px;
  background-color: #DDD;
  text-align: center;
  float: left;
  cursor: pointer;
}
.active{
    color: green;
}
.disabled{
    color: red;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "container">
  <div class = "numChoice first-row">
  <div class = "col-md-5ths">
    <div class = "num">1</div>
  </div>
  <div class = "col-md-5ths">
    <div class = "num">2</div>
  </div>
  <div class = "col-md-5ths">
    <div class = "num">3</div>
  </div>
  <div class = "col-md-5ths">
    <div class = "num">4</div>
  </div>
  <div class = "col-md-5ths">
    <div class = "num">5</div>
  </div>
</div>
  <br><br>
<div class = "numChoice second-row">
  <div class = "col-md-5ths">
    <div class = "num">1</div>
  </div>
  <div class = "col-md-5ths">
    <div class = "num">2</div>
  </div>
  <div class = "col-md-5ths">
    <div class = "num">3</div>
  </div>
  <div class = "col-md-5ths">
    <div class = "num">4</div>
  </div>
  <div class = "col-md-5ths">
    <div class = "num">5</div>
  </div>
</div>

15.11.2018 10:44

Другие вопросы по теме

Воспроизведение видео в определенный момент в определенное время дня

Дождитесь завершения ajax перед возвратом результата (универсальная функция)

Передать список проверенных значений контроллеру объектом Bean?

Highcharts - используйте один и тот же график в нескольких местах

Как сопоставить свойство JSON по индексу, а не по имени

Как изменить цвет наведения в раскрывающемся списке окна выбора в jsp

Инициализировать две разные таблицы одним вызовом AJAX

Столбец jQuery с изменяемым размером не подходит, если увеличить заголовок таблицы более 20?

Ошибка при использовании одинарной кавычки в значении и выполняется, когда одинарная кавычка не используется в datatable

Wordpress jquery .load (url + '#grabMe') с визуальным композитором

Добавить активный / отключить дочерний элемент при нажатии

Ответы 4

Другие вопросы по теме

Похожие вопросы