javascript - 选择带有句点的元素

Question

这个问题已经有答案了:

escape dot in javascript (5 个回答)

已关闭 8 年前。

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

示例:

<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

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \ .

或使用属性值选择器，如下所示:

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

<强> Working Demo