代码之家 › 专栏 › 技术社区 › jakeva

jquery/javascript链接$(this)到另一个分区中的元素?

jquery javascript

jakeva · 技术社区 · 16 年前

我有一个多选框,我想用它来选择HTML模板窗口中显示的元素。所以我有几个选项要重复,并且基于它是否被选中,使预览元素可见或隐藏。我要买这样的东西:

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

正如您所看到的,我只是在我的区域Select菜单中迭代每个选项(我很确定语法是有效的),但我不知道如何将CSS应用到相应的部分….如何通过选项引用预览元素?

4 回复 | 直到 16 年前

user113716 16 年前

更简单的方法是打电话 .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');
});

Macha 16 年前

给每个选项一个对应于正确工件ID的名称。

例如

<select>
  <option value="whatever">Whatever</option>
  <option value="whatever2">Whatever 2</option>
</select>

然后每个元素都将包含在这样的一个DIV中:

 <div id="whatever-preview">
 <!-- Whatever -->
 </div>

然后你的javascript

$('#area_select option').each(function(i){
        if($(this).is(':selected')){var $css = {'visibility' : 'visible'}}
        else{var $css = {'visibility' : 'hidden'}}
        var div_name = "#" + $(this).attr('value') + "-preview";
        $(div_name).css($css);            
});

Joey C. 16 年前

为每个选项提供一个引用预览窗口中相应元素的ID的ID。

例如:

 <option id="option-1">This turns on the first option element in the preview window</option>
 <option id="option-2">This turns on the first option element in the preview window</option>

并为预览窗口元素提供类似的结束ID:

 <div id='window-1'>corresponding window preview element</div>

然后在javascript中:

 $("#window-" + $(this).attr('id').split('-')[1]).css($css);

Erik Escobedo 16 年前

首先,赋予元素隐藏或显示同一类,但ID与选项值匹配:

<div class="something" id="val_1">content1</div>
<div class="something" id="val_2">content2</div>
<div class="something" id="val_3">content3</div>
<div class="something" id="val_4">content4</div>

<select id="area_select">
    <option value="val_1">val 1</option>
    <option value="val_2">val 1</option>
    <option value="val_3">val 1</option>
    <option value="val_4">val 1</option>
</select>

然后,当选择选项更改时,隐藏所有内容并显示所选内容

$('#area_select').change( function(){
    var val = $(this).val();
    $('.something').hide();
    $('#'+val).show();
    return false;
});