选择带有句点的元素[重复]

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

使用任何元字符（例如 !"#$%&'()*+,./:;?@[]^`{|}~ ）作为 a 的文字部分名称，必须使用两个反斜杠进行转义：\ .

或者像这样使用属性值选择器：

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

Working Demo