Javascript 如何在jQuery中引用带括号的id

我对jQuery非常陌生，我需要在id为

id[2][t]

的文本输入框更改时获取值，并在

div

中显示该文本，以便稍后进行样式设置（也使用jQuery进行样式设置）

这是输入框代码：

<input id="id[2][t]" name="id[2][t]" maxlength="20" type="text">

我知道括号是个问题，但出于其他原因，它们需要保留

---

有什么想法吗？

改用属性选择器：

$( document.getElementById( "id[2][t]" ) ).change( function(){
  $( "#textpreview" ).text( this.value );
} );

var sel = $("[id='id[2][t]']");
sel.change(function() {
  $("#textpreview").val(sel.text());
});

---

您可以尝试使用属性选择器而不是id选择器

$('[id="id[2][t]"]')

---

您有

val

和

text

向后。交换：

$('#id\\[2\\]\\[t\\]').change(function() {
  var txtval = $('#id\\[2\\]\\[t\\]').val();
  $("#textpreview").text(txtval);
});

val

用于获取文本框的值

text

在

div

中设置文本

通过使用

this

而不是重新查询元素，可以进一步简化代码

$('#id\\[2\\]\\[t\\]').change(function() {
  var txtval = this.value;
  $("#textpreview").text(txtval);
});

---

你可以考虑修改IDS（虽然我猜它们可能是自动生成的）。根据您的ID，您的ID对规范无效

普通的旧JavaScript：

var elem = document.getElementById('id[2][t]');

elem.onchange = function()
{
    var elem = document.getElementById('textpreview');
    elem.removeChild(elem.firstChild)
    elem.appendChild(document.createTextNode(this.value));
}

---

---

啊。。。现在感觉不是好多了吗？

这样不行<代码>文本和

val

在错误的位置使用。巨魔。凶残的巨魔。你知道整个文档上的属性选择器非常慢，非常慢。@Raynos：是吗？你怎么知道我们知道这些？一、 首先，我不知道这一点。谢谢你的礼貌和解释；属性选择器将遍历整个上下文（默认情况下为

文档

），检查每个节点是否将该属性与该值匹配。人们应该知道/理解这一点，因为DOM就是这样工作的。是的……我想修改它们，但这不是一个选项。@Rob好的，这很公平，但如果你在今后遇到任何其他棘手的问题，请记住这一点。如果您的标记无效，那么您就更容易受到跨浏览器问题的影响。eah，通常您不希望生成这样的ID。这没有道理。我假设这些ID反映了一个表，在这种情况下，DOM自然为您提供了一种无需分配任何ID即可完成此操作的方法。这似乎工作得很好，而且更短。非常感谢。这与主题无关，但我如何根据id为[3]的选择框的值更改该div的类？

$（This.val（）==This.value

记住。。。您不需要对jQuery puke中的所有GetById使用jQuery，实际上从DOM中选择ID的速度要快30%。（让我看看我是否仍然可以找到perf）@Rob如果您使用jQuery to而不使用复杂的选择器，我建议实现这一点-在操作DOM时，任何性能改进都是可取的..不是downvoter，而是因为这个答案与上面同样被downvoter的答案重复，这可能是出于同样的原因：-）对id使用属性选择器的概念让我恶心。@Raynos:就是这样，这就是为什么投票否决了我？我想你更喜欢

\\[

和

\\]

？对于DOM中的一项，谁在乎它是否慢？您可以缓存此查找，或者向其中添加一个类，或者更改其ID，以便将来加快查找速度。我不知道你是怎么想的，但我讨厌在我的琴弦上画反斜杠，看起来很可怕。我想他们有药物可以帮助你缓解呕吐，希望你感觉好些。@Rocket我不赞成你推荐糟糕的代码实践。我不想让我的互联网慢到像爬行一样。

$（document.getElementById（“id[2][t]”）

FTWWhy你不

elem.addEventListener（'change'，function（）{…}）

因为我喜欢煽动你愤怒，@Raynos（还有，

。一旦change

是跨浏览器的，

addEventListener

不是）任何支持

.textContent

的浏览器都支持

.addEventListener

您的参数为空

$('#id\\[2\\]\\[t\\]').change(function() {
  var txtval = this.value;
  $("#textpreview").text(txtval);
});

var elem = document.getElementById('id[2][t]');

elem.onchange = function()
{
    var elem = document.getElementById('textpreview');
    elem.removeChild(elem.firstChild)
    elem.appendChild(document.createTextNode(this.value));
}