Question

我有点像javascript的新手，尽管我到目前为止建立了很多有用的网站和应用程序..

btu我觉得我以前把变量id传递给jquery的方式很幼稚。例如，当我不得不使用一些旧代码时，我过去常常这样做 .. 让我们假设我的所有网站都已用“a”标签编码，如下所示

<a id='myId' onclick='doSome(this.id)' > link </a>

然后在JS

function doSome(id){

//old code removed and replaced by jquery
    jQuery("#"+ id).show();

}

并且以这种方式运作的功能完美无缺......

所以，再次，假设我不能改变除函数内部代码之外的任何东西，使用变量id的最佳方法是什么？因为据我所知，我是否只使用过

jQuery(id).show();

而不是

jQuery("#"+ id).show();

它不起作用......对吧？

Answer 1

的jQuery（ID）.show（）;

确实不起作用，因为jQuery / $函数的参数是选择器，而不是ID。

'#'+id作为选择器，但只要id中的字符有效用于选择器且不需要转义就可以。

在HTML4 / XHTML1中，只有字母数字加上.:-_在ID中有效，因此您只需担心.和:。如果您'#'+id id a.b a，那么您实际上正在选择ID为b且类#的元素。在HTML5中，更多字符在ID中有效，因此粗略地将ID附加到$(document.getElementById(id))的可靠性更低。

使用普通的旧DOM而不是选择器更少jQuery-ish，但它更安全且（更简单）更快：

id

在任何情况下，当您已经有权访问该元素时，依靠document.getElementById(this.id)来选择元素是愚蠢的：this显然与this相同。< / p>

如果你可以改变标记，你最好只是将id传递给函数，那么你可能会丢失选择器/ getElementById，如果你不需要它，你可以也会丢失$('#myId').click(function() { ... });属性。更好的是，完全避免内联事件处理程序属性并从脚本中分配事件处理程序，例如使用jQuery this;在函数内部，show()将是有问题的元素。

虽然我不太明白代码应该做什么... myId myId点击{{1}}似乎有点多余，因为它必须是已经显示，以便您点击它。

Answer 2

不是传递this.id，而是传递this

然后你可以调用这个函数：

$(id).show();

Answer 3

如果您无法更改代码，

bobince已经介绍了如何使用$(document.getElementById(id))。

我只是想添加arguments的使用和一些比内联JS更好的例子：

我只是传递点击的元素，而不是传递ID，然后再次找到该元素。

将标记与功能分开是一种很好的做法。这有助于可维护性和可访问性。

所以我会写这样的HTML：

<a id='myId'> link </a>

要将点击处理程序附加到特定锚点，我会使用ID来定位它，并使用 jQuery selectors 。这是doSome()和处理程序的样子：

function doSome() {

      // Make use of the automatically created
      //   arguments array. This can make things
      //   very flexible.
    arguments[0].hide();

      // You can't click on invisible elements, so 
      //   maybe you meant hide() and not show()?
}

  // When the document is ready....
$(function() {
    $("#myId").click(function(event) {

          // call doSome with the element
        doSome($(this));

          // prevent the page changing
        event.preventDefault();
    });
})

的 jsFiddle example

如果您想定位所有标签而不只是一个：

$("a").click(function(event) { // call doSome with the element doSome( $(this) ); // prevent the page changing event.prevendDefault() });

这就是使用 arguments 非常有用的原因。有了它，很容易隐藏传递给doSome的所有元素：

function doSome() { $.each(arguments, function() { this.hide(); }); }

的 jsFiddle example

Answer 4

正确，它需要#作为css选择器。除了使用$而不是jQuery之外，您无法再对其进行整理（假设您已经没有使用$的冲突脚本

Answer 5

此代码：

jQuery("myId").show();

将查找具有此名称的标记，而非id。

参见语法：

jQuery("myTag");
jQuery("#myId");
jQuery(".myClass");

请参阅jQuery selectors API。

使用已经设置的id的更优雅方式是什么？ jQuery（“＃”+ t）？

5 个答案:

的 jsFiddle example

的 jsFiddle example