Jquery/Javascript链接$（this）到不同div中的元素？

我有一个多重选择，我想用它来选择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应用到相应的一块....我怎样才能通过我的选项参考我的预览元素？

来源

2010-07-02 jakev

如何选择选项和链接的div，是标识相同或什么吗？ – R0MANARMY 2010-07-02 20:23:58

更简单的方法是在多重选择上拨打.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'); 
});

来源

2010-07-02 20:25:43 user113716

感谢您的提示，但是什么是selectorForCollection呢？ – jakev 2010-07-02 21:24:41

@Jake - 我的意思是使用一些选择器来匹配所有可见的项目，并首先隐藏它们。没有看到你的HTML结构，我不知道你会用什么选择器。试图让事情尽可能地公开化。最好的方法随着HTML更改而变化。：o） – user113716 2010-07-02 22:00:41

给每个对应的正确片的ID名称的选项。

例如

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

然后你们每个元素将被包含在AA 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);    
});

来源

2010-07-02 20:27:47 Macha

调用$（this）.name返回undefined对我来说... – jakev 2010-07-02 21:35:23

对不起，应该是$（this）.attr（'name'）。固定。 – Macha 2010-07-02 21:40:29

@JakeVA：Patrick的回答比较好。你应该接受那个。 – Macha 2010-07-02 21:54:37

给每个选项的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>

，并给予预览窗口元素结束类似的IDS：

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

然后在JavaScript：

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

来源

2010-07-02 20:28:33

首先，给要素隐藏或显示相同的类别，但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>

然后，当选择choosen选项更改隐藏所有的东西，并显示所选择的

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

来源

2010-07-02 20:32:25

Jquery/Javascript链接$（this）到不同div中的元素？

回答

相关问题