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

How to use variable id as selector in jQuery

本文关键字：ID 变量 选择器 jQuery      更新时间：2023-09-26

我在这里找到了一个选择框的小提琴：http://jsfiddle.net/davidThomas/5Eebm/工作得很好，但我需要一个动态#的选择框，这意味着id的动态#。作为 jQuery 和 javascript 的新手，我将如何在 jq 中创建变量选择器，例如，如果我在我的 php 中使用动态 [idx] 值将每个 id 增加 1（例如：prophlist_1、choose_1; prophlist_2、choose_2; 等）。任何见解将不胜感激。

这是小提琴代码：

<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());
});

我需要有一个动态的 # 选择框，这意味着 id 的动态 #

不。您根本不需要使用元素 ID 即可使此功能正常工作。您可以改为为选择元素指定相同的类：

<select class="choose">

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

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

然后在处理程序中，使用 DOM 导航方法（如 .next()）根据其在标记中的相对位置查找div，而不是使用 id 来查找相关的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/

相关文章：