Изменить стили в активном блоке

155

08 января 2019, 22:50

Есть несколько блоков с товарами, по клику на блок нужно изменить стили дочерних элементов (у .sizes-block, .colors-block и прочих - display на block). Скрытые блоки должны отображаться только в активном блоке. Подскажите, как это сделать

/*var cards = document.getElementsByClassName("card"); 
console.log(cards); 
 
for (var i = 0; i < cards.length; i++) { 
  cards[i].addEventListener("click", function () { 
    if (cards[0].childNodes.className == "") 
  }); 
}*/

/*=======Products=======*/ 
 
.products_main-info { 
  margin: 0 auto; 
  text-align: center; 
  padding-top: 41px; 
} 
.products-label { 
  font-size: 27px; 
  letter-spacing: 2.825px; 
  margin-left: 3px; 
  text-transform: uppercase; 
} 
.products-info { 
  color: #6e6e6e; 
  font-size: 14px; 
  padding-top: 13px; 
  text-transform: uppercase; 
  font-family: Cairo, sans-serif; 
  font-weight: 400; 
  line-height: 17px; 
  padding-left: 6px; 
  padding-bottom: 88px; 
} 
.grid-2 { 
  display: grid; 
  grid-template-columns: repeat(3, 323.1px); 
  grid-template-rows: repeat(2, 406.8px); 
  grid-column-gap: 29px; 
  grid-row-gap: 57px; 
  align-items: stretch; 
  max-width: 1025px; 
  margin: 0 auto; 
} 
.card { 
  background: #e6eef0; 
  position: relative; 
  background-repeat: no-repeat; 
} 
.card:hover { 
  box-shadow: -1px 6px 25px 0px rgba(0, 0, 0, 0.14); 
} 
.card_label { 
  position: absolute; 
  bottom: 0; 
  background-color: #ffffff; 
  width: 84.5%; 
  text-align: left; 
  text-transform: uppercase; 
  padding: 0 25px 0 25px; 
  padding-bottom: 15px; 
  font-size: 13px; 
  letter-spacing: 1.05px; 
  font-family: 'Cairo', sans-serif; 
  line-height: 17.1px; 
  font-weight: bold; 
  padding-top: 15px; 
} 
.card-1 { 
  background-image: url(images/gothic-girl-by-lienskullova.png); 
} 
.card-2 { 
  background-image: url(images/m1.png); 
  background-position: 66%; 
  background-size: 58%; 
} 
.card-3 { 
  background-image: url(images/m3.png); 
  background-position: 50% 1%; 
  background-size: 73%; 
} 
.card-4 { 
  background-image: url(images/model-7.png); 
  background-size: 34%; 
  background-position: 52% 3px; 
} 
.card-5 { 
  background-image: url(images/model-10.png); 
  background-position: 51%; 
  background-size: 59%; 
} 
.card-6 { 
  background-image: url(images/model-4.png); 
  background-position: 48% 1%; 
  background-size: 71%; 
} 
.price { 
  color: #00cccc; 
  font-size: 22px; 
  font-weight: 700; 
  font-family: Montserrat; 
  letter-spacing: 1.7px; 
  position: absolute; 
  right: 26px; 
  bottom: 24px; 
} 
.shopping-card_add { 
  width: 176px; 
  height: 40px; 
  background: black; 
  color: white; 
} 
 
/*======Products-Onclick======*/ 
 
.sizes-block{ 
  display: none; 
} 
 
.sizes{ 
  padding-bottom: 14px; 
} 
 
.colors-block{ 
  display: none; 
} 
 
.colors-logo{ 
  padding-bottom: 5px; 
} 
 
.colors{ 
  padding-bottom: 11px; 
  padding-left: 3px; 
} 
 
.color{ 
  border-radius: 50%; 
  width: 16px; 
  height: 16px; 
  display: inline-block; 
  margin-right: 7px; 
} 
 
.red{ 
  background: #ff0033; 
} 
 
.orange{ 
  background: #ff4200; 
} 
 
.blue{ 
  background: #33cccc; 
} 
 
.purple{ 
  background: #6666cc; 
} 
 
 
.add-button, .show-button{ 
  position: absolute; 
  width: 114px; 
  height: 34px; 
  padding-right: 20px; 
  display: none; 
} 
 
.button>a{ 
  color: #ffffff; 
} 
 
.add-button{ 
  top: 67px; 
  left: 84px; 
  line-height: 36px; 
} 
 
.show-button{ 
  top: 112px; 
  line-height: 38px; 
  left: 86px; 
  letter-spacing: -0.2px; 
}

<div class="products"> 
  <div class="container"> 
    <div class="products_main-info"> 
      <h3 class="label products-label">our products</h3> 
      <div class="products-info">new products every fucken <br> day.</div> 
      <div class="grid-2"> 
        <div id="card" class="card card-1 card-onclick"> 
          <div class="button add-button"><a href="#">add to cart</a></div> 
          <div class="button show-button"><a href="#">show gallery</a></div> 
          <div class="card_label"> 
              <div class="dress-logo dl-onclick">fantastic black dress.</div> 
              <div class="dress-caption dc-onclick">party dress</div> 
              <div class="price">99$</div> 
            <div class="sizes-block"> 
              <div class="sizes-logo">sizes</div> 
              <div class="sizes">xs, sm, l, xl, xxl</div> 
            </div> 
            <div class="colors-block"> 
              <div class="colors-logo">colors</div> 
              <div class="colors"> 
                <div class="color red"></div> 
                <div class="color orange"></div> 
                <div class="color blue"></div> 
                <div class="color purple"></div> 
              </div> 
            </div> 
          </div> 
        </div> 
        <div id="card" class="card card-2"> 
          <div class="button add-button"><a href="#">add to cart</a></div> 
          <div class="button show-button"><a href="#">show gallery</a></div> 
          <div class="card_label"> 
              <div class="dress-logo dl-onclick">fantastic jeans.</div> 
              <div class="dress-caption dc-onclick">summer dress</div> 
              <div class="price">65$</div> 
            <div class="sizes-block"> 
              <div class="sizes-logo">sizes</div> 
              <div class="sizes">xs, sm, l, xl, xxl</div> 
            </div> 
            <div class="colors-block"> 
              <div class="colors-logo">colors</div> 
              <div class="colors"> 
                <div class="color red"></div> 
                <div class="color orange"></div> 
                <div class="color blue"></div> 
                <div class="color purple"></div> 
              </div> 
            </div> 
          </div> 
        </div> 
        <div id="card" class="card card-3"> 
          <div class="button add-button"><a href="#">add to cart</a></div> 
          <div class="button show-button"><a href="#">show gallery</a></div> 
          <div class="card_label"> 
              <div class="dress-logo dl-onclick">fantastic beat.</div> 
              <div class="dress-caption dc-onclick">wintwe dress</div> 
              <div class="price">65$</div> 
            <div class="sizes-block"> 
              <div class="sizes-logo">sizes</div> 
              <div class="sizes">xs, sm, l, xl, xxl</div> 
            </div> 
            <div class="colors-block"> 
              <div class="colors-logo">colors</div> 
              <div class="colors"> 
                <div class="color red"></div> 
                <div class="color orange"></div> 
                <div class="color blue"></div> 
                <div class="color purple"></div> 
              </div> 
            </div> 
          </div> 
        </div> 
        <div id="card" class="card card-4"> 
          <div class="button add-button"><a href="#">add to cart</a></div> 
          <div class="button show-button"><a href="#">show gallery</a></div> 
          <div class="card_label"> 
              <div class="dress-logo dl-onclick">fantastic jeans.</div> 
              <div class="dress-caption dc-onclick" s>summer dress</div> 
              <div class="price">99$</div> 
            <div class="sizes-block"> 
              <div class="sizes-logo">sizes</div> 
              <div class="sizes">xs, sm, l, xl, xxl</div> 
            </div> 
            <div class="colors-block"> 
              <div class="colors-logo">colors</div> 
              <div class="colors"> 
                <div class="color red"></div> 
                <div class="color orange"></div> 
                <div class="color blue"></div> 
                <div class="color purple"></div> 
              </div> 
            </div> 
          </div> 
        </div> 
        <div id="card" class="card card-5"> 
          <div class="button add-button"><a href="#">add to cart</a></div> 
          <div class="button show-button"><a href="#">show gallery</a></div> 
          <div class="card_label"> 
              <div class="dress-logo dl-onclick">fantastic jeans.</div> 
              <div class="dress-caption dc-onclick">summer dress</div> 
              <div class="price">65$</div> 
            <div class="sizes-block"> 
              <div class="sizes-logo">sizes</div> 
              <div class="sizes">xs, sm, l, xl, xxl</div> 
            </div> 
            <div class="colors-block"> 
              <div class="colors-logo">colors</div> 
              <div class="colors"> 
                <div class="color red"></div> 
                <div class="color orange"></div> 
                <div class="color blue"></div> 
                <div class="color purple"></div> 
              </div> 
            </div> 
          </div> 
        </div> 
        <div id="card" class="card card-6"> 
          <div class="button add-button"><a href="#">add to cart</a></div> 
          <div class="button show-button"><a href="#">show gallery</a></div> 
          <div class="card_label"> 
              <div class="dress-logo dl-onclick">fantastic beat.</div> 
              <div class="dress-caption dc-onclick">wintwe dress</div> 
              <div class="price">65$</div> 
            <div class="sizes-block"> 
              <div class="sizes-logo">sizes</div> 
              <div class="sizes">xs, sm, l, xl, xxl</div> 
            </div> 
            <div class="colors-block"> 
              <div class="colors-logo">colors</div> 
              <div class="colors"> 
                <div class="color red"></div> 
                <div class="color orange"></div> 
                <div class="color blue"></div> 
                <div class="color purple"></div> 
              </div> 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</div>

Answer 1

При клике на block самому block-у присваивается класс active, .block.active .price же в свою очередь имеет другой цвет, отличный от .block .price.

Кстати, таким же методом можно и показать/спрятать различные блоки(

.block .some_block - { display: none },

.block.active .some_block - { display: block }

Примените эту же логику в свой код.

$('.blocks').on('click', '.block', function() { 
  $('.block').removeClass('active'); 
  $(this).addClass('active'); 
})

.block { 
  padding: 8px 10px; 
  cursor: pointer; 
} 
.block.active .price { 
  color: #ff0000; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="blocks"> 
  <div class="block"> 
    <div class="price">$100.00</div> 
   </div> 
  <div class="block"> 
    <div class="price">$320.50</div> 
   </div> 
  <div class="block"> 
    <div class="price">$294.75</div> 
   </div> 
</div>