Jquery/Javascript将$(this)链接到不同div中的元素？

Question

我有一个多选项,我想用它来选择在HTML模板窗口中显示哪些元素.所以我想要迭代几个选项,并根据它是否被选中,使预览元素可见或隐藏.我要去做这样的事情:

$('#area_select option').each(function(i){
            if($(this).is(':selected')){var $css = {'visibility' : 'visible'}}
            else{var $css = {'visibility' : 'hidden'}}
            $(??????).css($css);            
        });

正如你所看到的,我只是在我的area_select菜单中迭代每个选项(我很确定语法有效),但我不知道如何将css应用到相应的部分....如何我可以通过我的选项参考我的预览元素吗？

Answer 1

更简单的方法是调用.val()多重选择.返回一个可以迭代的选定值数组.

var array = $('#area_select').val()
$.each(array, function(i,val) {
    // your code
});

因此,就显示元素而言,它将取决于选择选项的值中存储的数据类型.

对于ID,请执行以下操作:

$(selectorForCollection).css('visibility','hidden');

var array = $('#area_select').val();

$.each(array, function(i,value) {
    $('#' + value).css('visibility','visible');
});

或者如果它们是类名,请执行以下操作:

$(selectorForCollection).css('visibility','hidden');

var array = $('#area_select').val();

$.each(array, function(i,value) {
    $('.' + value).css('visibility','visible');
});