@chameleonestest

Как скрывать или показывать div в зависимости от select?

Здравствуйте.

Имею вот такой select с двумя параметрами:
<div class="popup__mem d-flex">
<div class="popup__mem__title"><h3>Объём памяти:</h3></div>
<div class="select-mem">
<select name="mem" id="mem">
<option class="GB64" value="64GB">64ГБ</option>
<option class="GB128" value="128GB">128ГБ</option>
</select>
</div>


И два div, которые должны показываться в зависимости от select
<div class="total-price-1">
<s class="product__oldprice ">54 999 p.</s>
<h1 class="product_newprice">49 999 p.</h1>
</div>
<div class="total-price-2">
<s class="product__oldprice ">62 999 p.</s>
<h1 class="product_newprice">55 999 p.</h1>
</div>


Стили прописал вот такие:

.total-price-1 {
	margin-right: 42px;
	text-align: right;
	padding: 0;
	margin-bottom: 0;
        display: none;
	}
.total-price-1.active {
	display: block !important;
}
.total-price-2 {
	margin-right: 42px;
	text-align: right;
	padding: 0;
	margin-bottom: 0;
        display: none;
	}
.total-price-2.active {
	display: block !important;
}


А в JS вот так прописал:

$(document).ready(function(){
    $('#mem').change(function(){
        if ($('#mem option:selected').hasClass("GB64")) {
            $("total-price-1").addClass('active');
       }
        if ($('#mem option:selected').hasClass("GB128")) {
            $("total-price-2").addClass('active');
       }
    });


Понимаю, что здесь есть ошибка, но никак не могу её найти (мой уровень по шкале крепости Протодьяконова примерно 1, прошу прощения, если что не так написал)

Помогите найти ошибку, большое спасибо!
  • Вопрос задан
  • 101 просмотр
Решения вопроса 1
@Firsov36
full-stack web developer
Ошибка в JS как минимум в том, что Вы обращаясь к блокам по классу, не указали точку перед классом.
Ну и код можно написать так:

$(document).ready(function(){
    $('#mem').change(function(){
        if ( $(this).val() === '64GB' ) {
            $('.total-price-1').addClass('active');
            $('.total-price-2').removeClass('active');
        } else if ( $(this).val() === 'GB128' ) {
            $('.total-price-1').removeClass('active');
            $('.total-price-2').addClass('active');
        }
    });
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@Ibishka
$(document).ready(function(){
    $('#mem').change(function(){
        if ($('#mem option:selected').val() == '64GB') {
            $("total-price-1").addClass('active');
       }
        if ($('#mem option:selected').val() == '128GB') {
            $("total-price-2").addClass('active');
       }
    });
Ответ написан
@b4rret
Никакие :selected не нужны! Просто:
$(document).ready(function(){
    var memSelect = $('#mem');
    memSelect.change(function() {
        if ( memSelect.val() === '64GB' ) {
            $('total-price-1').addClass('active');
            $('total-price-2').removeClass('active');
        } else if ( memSelect.val() === 'GB128' ) {
            $('total-price-1').removeClass('active');
            $('total-price-2').addClass('active');
        }
    })
});


Вообще, на будущее, создавай такие вопросы на jsfiddle и т. п. Быстрей найдешь решение! Заходить в редактор и проверять правильность бывает лень )
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы