Предотвратить применение стиля к последнему дочернему элементу

Мне нужно, чтобы последний ребенок не добавлял backgroundColor. Поле сброса должно оставаться белым. Я не хочу давать окну сброса другой класс, чтобы он не менял цвет. Мне нужно, чтобы стили не добавлялись. Любая помощь или толчок в правильном направлении будут очень благодарны. Я пробовал использовать: not (: last-child), но, похоже, это не сработало.

$(".btn").click(function () {
  boxColor = $(this).val();
$(".box:not(:last-child)").css('background-color', boxColor);
});

Вот мой код:

$(".btn").click(function () {
  boxColor = $(this).val();
  $(".box").css('background-color', boxColor);
});

$(".reset").click(function () {
  $(".box").removeAttr('style');
});

body {
  background: lightgrey;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row;
  max-width: 980px;
  margin: 0 auto;
}

.col-3 {
  flex: 0 0 24.999%;
}

.box {
  height: 200px;
  max-width: 230px;
  margin: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.box.red {
  background: #E53A40;
}
.box.green {
  background: #285943;
}
.box.blue {
  background: #6AAFE6;
}
.box.white {
  background: white;
}

@media (max-width: 768px) {
  .col-3 {
    flex: 0 0 100%;
  }

  .box {
    max-width: 100%;
    margin-bottom: 1em;
  }
}

<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <title>Test</title>
</head>
<body>
  <div class = "container">
    <div class = "col-3">
      <div class = "box red">
        <button class = "btn" value = "#E53A40">Red</button>
      </div>
    </div>
    <div class = "col-3">
      <div class = "box green">
        <button class = "btn" value = "#285943">Green</button>
      </div>
    </div>
    <div class = "col-3">
      <div class = "box blue">
        <button class = "btn" value = "#6AAFE6">Blue</button>
      </div>
    </div>
    <div class = "col-3">
      <div class = "box white">
        <button class = "reset" id = "reset">Reset</button>
      </div>
    </div>
  </div>
</body>
</html>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Вопрос не в том, как не выбирать :last-child, потому что здесь речь идет не о родственных элементах и не о селекторе CSS, а о селекторе jQuery.

— 02.09.2018 10:51

javascript jquery html css

02.09.2018 02:00

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

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

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

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

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

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

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

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

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

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

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

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

Ответы 2

Вместо этого вы должны использовать :last. Селектор :last-child CSS рассматривает элементы внутри тот же контейнер:

The :last-child CSS pseudo-class represents the last element among a group of sibling elements.^ref

$(".btn").click(function () {
  boxColor = $(this).val();
$(".box:not(:last)").css('background-color', boxColor);
});

$(".reset").click(function () {
  $(".box").removeAttr('style');
});

body {
  background: lightgrey;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row;
  max-width: 980px;
  margin: 0 auto;
}

.col-3 {
  flex: 0 0 24.999%;
}

.box {
  height: 200px;
  max-width: 230px;
  margin: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.box.red {
  background: #E53A40;
}
.box.green {
  background: #285943;
}
.box.blue {
  background: #6AAFE6;
}
.box.white {
  background: white;
}

@media (max-width: 768px) {
  .col-3 {
    flex: 0 0 100%;
  }

  .box {
    max-width: 100%;
    margin-bottom: 1em;
  }
}

<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <title>Test</title>
</head>
<body>
  <div class = "container">
    <div class = "col-3">
      <div class = "box red">
        <button class = "btn" value = "#E53A40">Red</button>
      </div>
    </div>
    <div class = "col-3">
      <div class = "box green">
        <button class = "btn" value = "#285943">Green</button>
      </div>
    </div>
    <div class = "col-3">
      <div class = "box blue">
        <button class = "btn" value = "#6AAFE6">Blue</button>
      </div>
    </div>
    <div class = "col-3">
      <div class = "box white">
        <button class = "reset" id = "reset">Reset</button>
      </div>
    </div>
  </div>
</body>
</html>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

02.09.2018 02:08

Вам следует просто использовать селектор элементов :last в своем запросе.

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

$(".btn").click(function () {
  boxColor = $(this).val();
$(".box:not(:last)").css('background-color', boxColor);
});

$(".reset").click(function () {
  $(".box").css('background-color', 'none');
});

02.09.2018 02:22

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

Ползунок перекрытия слайдера jQuery UI

CSS-эффект наведения на информационное окно, но с отчетливыми цветами

Сообщение jquery добавляет конкретный $ _POST

Как я могу создавать собственные формы в CSS react.js?

Вызов jquery api показывает пустой возврат

Успех JQuery приводит к символам \ r \ n

Как я могу исправить слайд-шоу, чтобы точки работали автоматически

AJAX: неопределенный индекс после сериализации

Как отлаживать php во время вызова jquery ajax

Загрузчик (счетчик) не отображается в Chrome, если он не находится в режиме отладки

Предотвратить применение стиля к последнему дочернему элементу

Ответы 2

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

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