如何在jQuery中使用变量id作为选择器

Question

我在这里找到了一个选择框的小提琴：http://jsfiddle.net/davidThomas/5Eebm/，它工作得很好，但我需要有一个动态的选择框#，这意味着一个动态的ids #。作为jQuery和javascript的新手，如果我在php中使用动态idx值将每个id加1(例如: prophlist_1，choose_1；prophlist_2，choose_2等)，我该如何在jq中创建一个变量选择器？任何有见地的人都会非常感激。

这是小提琴代码：

<ul id="prophlist" style="display:none;">
<li>Prophecy 1 text</li>
<li>Prophecy 2 text</li>
<li>Prophecy 3 text</li>
<li>Prophecy 4 text</li>
<li>Prophecy 5 text</li>
<li>Prophecy 6 text</li>
<li>Prophecy 7 text</li>
<li>Prophecy 8 text</li>
<li>Prophecy 9 text</li>
<li>Prophecy 10 text</li>
</ul>
<select id="choose">
<option value="1">Title 1</option>
<option value="2">Title 2</option>
<option value="3">Title 3</option>
<option value="4">Title 4</option>
<option value="5">Title 5</option>
<option value="6">Title 6</option>
<option value="7">Title 7</option>
<option value="8">Title 8</option>
<option value="9">Title 9</option>
<option value="10">Title 10</option>
</select>

<div id="update">
</div>

$('#choose').change(
function(){
    var i = this.selectedIndex;
    $('#update').text($('#prophlist li').eq(i).text());
});

Answer 1

我需要选择框的动态数量，这意味着ids的动态数量

不是的。您根本不需要使用元素ids来使此功能正常工作。相反，您可以为select元素指定相同的类

<select class="choose">

然后使用该类将相同的更改处理程序绑定到所有这些类：

$(".choose").change(function() { ... });

然后在处理程序中，不使用id来查找相关的div，而是使用像.next()这样的DOM navigation methods来根据它在标记中的相对位置来查找div：

    $(this).next().text(...)

此外，如果display:none; ul元素仅用于保存描述，为什么不去掉它，直接将描述添加到每个选项中，如下所示：

<option value="1" data-desc="Prophecy text 1">Title 1</option>

把这些放在一起，你的函数可能看起来像这样：

$('.choose').change(function(){
    $(this).next().text( $(this).find(':selected').attr('data-desc') );
})

下面是您的小提琴的更新版本，它显示了JS处理多个选择元素的一小部分：http://jsfiddle.net/5Eebm/75/