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

使用任何元字符（例如！“＃$％＆amp;'（）* +，。/：;＆lt; =＆gt;？@ [] ^`{|}〜）作为文字作为名称的一部分，必须使用两个反斜杠进行转义：\。

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

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

<强> Working Demo

选择带有句点的元素

1 个答案: