选择带有句点的元素

Question

我有一个简单的脚本，根据您选择的选项显示一个元素。

例子：

<select id="my-selector"> 
    <option value="cat">Cat</option> 
    <option value="dog">Dog</option> 
</select> 

<div id="cat" class="hideme" style="display:none"> 
    Cat 
</div> 

<div id="dog" class="hideme" style="display:none"> 
    Dog 
</div> 

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> 
<script> 
$(function() { 
    $('#my-selector').change(function(){ 
     $('.hideme').hide(); 
     $('#' + $(this).val()).show(); 
    }); 
}); 
</script> 

但我遇到的问题引入期的时候，是这样的：

<select id="my-selector"> 
    <option value="cat.meow">Cat</option> 
    <option value="dog.bark">Dog</option> 
</select> 

<div id="cat.meow" class="hideme" style="display:none"> 
    Cat 
</div> 

<div id="dog.bark" class="hideme" style="display:none"> 
    Dog 
</div> 

我知道我需要逃跑的时间，但问题是这些值选择字段和div的ID是动态生成的，我无法控制它们的输出方式。

有没有办法修改javascript来解决这个问题？

Answer 1

要使用任何的元字符（诸如“＃$％&“（）* +，/ :; < => @ [] ^`！？{|}〜）作为文字名字的一部分，它必须被转义用两个反斜杠：\

或使用属性数值选择这样的：

$('[id="' + $(this).val()+'"]').show(); 

Working Demo