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

Question

[Владимир Голубь]

Вот рабочий скрипт на 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');
        }
    });

Comments

[Владимир Голубь]

onchange на Jquery я стер

Answer 1

[Владимир Голубь]

Ошибку нашел

$('#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');
        }
    });

Answer 2

[Дима Паутов]

Так я думаю будет лучше и короче!

$('#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();
    }
});

Answer 3

[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);
    });
});

Comments

[Владимир Голубь]

addEventListener IE разве поддерживает ?

[RubaXa]

Начиная c IE9, но есть что всегда можно просто написать `calculationTypeProduct.onchange = ...`