Задать вопрос

Как переписать скрипт с JS на JQuery?

Вот рабочий скрипт на JS
<select id="calculationTypeProduct" name="calculationTypeProduct" onchange="showhideBlocks(this.value)">
</select>


function showhideBlocks(val){
if (val == 'businesscards'){
    document.getElementById('businesscards').style.display='block';
    document.getElementById('fotoprint').style.display='none';
    document.getElementById('blank').style.display='none';
}
else if (val == 'fotoprint'){
    document.getElementById('businesscards').style.display='none';
    document.getElementById('fotoprint').style.display='block';
    document.getElementById('blank').style.display='none';
}
else if (val == 'blank'){
     document.getElementById('businesscards').style.display='none';
     document.getElementById('fotoprint').style.display='none';
     document.getElementById('blank').style.display='block';
}
}


А вот пробую на JQuery не могу понять передаю я value или нет

$('#calculationTypeProduct').change(function(){
        if(this.val() == '1') {
            $('#vizitka').css('display','block');
            $('#fotoPrint').css('display','none');
            $('#blank').css('display','none');
        } else if(this.val() == '2') {
            $('#vizitka').css('display','none');
            $('#fotoPrint').css('display','none');
            $('#blank').css('display','block');
        } else if(this.val() == '3') {
            $('#vizitka').css('display','none');
            $('#fotoPrint').css('display','block');
            $('#blank').css('display','none');
        }
    });
  • Вопрос задан
  • 361 просмотр
Подписаться 1 Оценить 1 комментарий
Решения вопроса 3
RazerVG
@RazerVG Автор вопроса
FrontEnd
Ошибку нашел

$('#calculationTypeProduct').change(function(){
        if($(this).val() == '1') {
            $('#vizitka').css('display','block');
            $('#fotoPrint').css('display','none');
            $('#blank').css('display','none');
        } else if($(this).val() == '2') {
            $('#vizitka').css('display','none');
            $('#fotoPrint').css('display','none');
            $('#blank').css('display','block');
        } else if($(this).val() == '3') {
            $('#vizitka').css('display','none');
            $('#fotoPrint').css('display','block');
            $('#blank').css('display','none');
        }
    });
Ответ написан
Комментировать
bootd
@bootd
Гугли и ты откроешь врата знаний!
Так я думаю будет лучше и короче!

$('#calculationTypeProduct').change(function(){
// Тут лучше дать все этим блокам какой нибудь класс и написать его тут
    $('#vizitka, #blank, #fotoPrint').hide();
    if($(this).val() == '1') {
        $('#vizitka').show();
    } else if($(this).val() == '2') {
        $('#blank').show();
    } else if($(this).val() == '3') {
        $('#fotoPrint').show();
    }
});
Ответ написан
Комментировать
RubaXa
@RubaXa
Но зачем, ведь можно просто упростить, добавить addEventListener и расслабиться:

function showHideBlocks(val) {
   var values = {'businesscards': 1, 'fotoprint': 2, 'blank': 3};

    for (var id in values) {
        var el = document.getElementById(id);
        el && (el.style.display = values[id] == val ? 'block' : 'none');
    }
}


Но если очень хочется:
$('#calculationTypeProduct').change(function () {
    var val = this.value;
    
    $.each({'businesscards': 1, 'fotoprint': 2, 'blank': 3}, function (id, n) {
        $('#' + id).toggle(val == n);
    });
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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