-1

Помогите написать скрипт желательно в jQuery, при условии, если над блоком основной цены существует блок старой цены, что бы цвет основной цены менялся на красный, как в коде. Иначе пусть будет черным. В js и jQuery пока только обучаюсь, а скрипт уже нужен

.cart__price-old {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  text-decoration: line-through;
  color: #9E9E9E;
}
.cart__price-main{
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 31px;
  color: #DF5151;
}
<div class="cart__price">
    <p class="cart__price-old price">9600</p>
    <p class="cart__price-main price">5960</p>
</div>

2 ответа 2

0

Я не удержался :) Решение на чистом CSS:

.cart__price-old {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  text-decoration: line-through;
  color: #9E9E9E;
}
.cart__price-main {
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 31px;
  color: #DF5151;
}

.cart__price {
  border: 1px solid black;
}

.cart__price-old + .cart__price-main {
  color: black;
}
<div class="cart__price">
    <p class="cart__price-old price">9600</p>
    <p class="cart__price-main price">5960</p>
</div>

<div class="cart__price">
    <p class="cart__price-main price">5960</p>
</div>

2
  • 3
    Черт возьми, это гениально! Спасибо!
    – user510685
    20 июл 2022 в 18:49
  • 1
    @MichaelKardamon Если ответ вам помог, то пожалуйста примите его - отметье зелёную галочку слева от ответа
    – EzioMercer
    20 июл 2022 в 21:39
-1

Это можно сделать и с помощью css

.cart__price-old {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  text-decoration: line-through;
  color: #9E9E9E;
}

.cart__price-main {
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 31px;
  color: #DF5151;
}

.cart__price-old ~ .cart__price-main {
  color: lime
}
<div class="cart__price">
  <p class="cart__price-old price">9600</p>
  <p class="cart__price-main price">5960</p>
</div>

<hr />

<div class="cart__price">
  <p class="cart__price-main price">3000</p>
</div>



А если нужно именно на JS, то вот код для вашей ситуации:

const price_box_list = document.querySelectorAll('.cart__price')

price_box_list.forEach((el) => {
  const old_price = el.querySelector('.cart__price-old')
  
  if (old_price) {
    const mainPrice = el.querySelector('.cart__price-main')
    mainPrice.style.color = 'aqua'
  }
})
9
  • 2
    При решении с JS вы смотрите на существование блока price-old, а не то что он находится ДО price-main
    – EzioMercer
    20 июл 2022 в 18:53
  • @EzioMercer Цитирую отрывок из условия задачи: при условии, если над блоком основной цены существует блок старой цены. Тем более, если код сильно поменяется внутри .cart__price, моё решение JS останется рабочим (если классы останутся прежними)
    – HaZcker
    20 июл 2022 в 18:55
  • И где вы проверяете "над блоком"? Как по мне вы просто смотрите на наличие блока старой цены :)
    – EzioMercer
    20 июл 2022 в 19:09
  • 2
    "А зачем писать лишние проверки" - на самом деле этого и не нужно вам делать. А замечание верное, наличие блока и наличие блока в определённом месте - это не одно и то же
    – user506306
    21 июл 2022 в 8:09
  • 1
    @HaZcker не очень понимаю вас... Вроде бы проверку на nextElementSibling не так уж сложно написать...
    – ΝNL993
    21 июл 2022 в 8:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.