2014-09-12 73 views
0

我有一個簡單的腳本,根據您選擇的選項顯示一個元素。選擇帶有句點的元素

例子:

<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來解決這個問題?

+0

和http://stackoverflow.com/q/6675454/218196,可能還有更多。 – 2014-09-12 15:03:46

+1

http://stackoverflow.com/questions/9930577/jquery-dot-in-id-selector – charlietfl 2014-09-12 15:04:39

+0

http://stackoverflow.com/questions/605630/how-to-select-html-nodes-by-id-with -jquery-when-the-id-contained-a-dot – 2014-09-12 15:06:31

回答

1

要使用任何的元字符(諸如「#$%&「()* +,/ :; < => @ [] ^`!?{|}〜)作爲文字名字的一部分,它必須被轉義用兩個反斜槓:\

或使用屬性數值選擇這樣的:

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

Working Demo

+0

哇謝謝,完美的作品。很簡單。 – user3256143 2014-09-12 15:20:05