存储元素 jQuery 的 id - Javascript

当使用jQuery选择器获取某个元素的时候，我们可以通过它的id属性来选取对应的元素。在这个过程中，我们可能会需要对选取到的元素进行一些操作，而这些操作会涉及到对选取到的元素进行储存的问题。

这里我们介绍一些储存元素id的方法，方便我们能够更加灵活的操作元素。

使用全局变量

全局变量是一种最简单粗暴的储存元素id的方法。通过全局变量，我们可以在任何地方都能够获取到储存的元素id，方便我们进行操作。

下面是一个例子：

var $element = $('#element-id');

function someFunction() {
    $element.css('color', 'red');
}

在这个例子中，我们首先通过$('#element-id')获取到了id为element-id的元素，然后将其储存在了名为$element的全局变量中。

在someFunction()这个函数里，我们能够直接访问到$element这个变量，方便我们进行对元素的操作。

使用data属性

除了使用全局变量之外，还可以将元素id储存在DOM元素本身之中，这就要用到data属性了。

jQuery的data()方法可以通过获取或设置元素的自定义属性来把信息储存在DOM节点之中。

具体实现方式如下：

<div id="element-id" data-element-id="element-id"></div>

这里，我们在div元素中增加一个称为data-element-id的属性，属性值为element-id。然后我们可以使用$( "#element-id" ).data("element-id")来获取element-id这个值。

例如：

var $element = $('#element-id');

function someFunction() {
    var elementId = $element.data('element-id');
    console.log(elementId); // 输出 'element-id'
}

在这个例子中，我们可以通过$element.data('element-id')方法获取到element-id这个值。这个值可以在需要的时候用来对元素进行操作。

使用闭包

闭包是一种更加灵活的储存元素id的方法。它允许我们能够更加细致地储存元素id，并且可以在需要的时候进行动态的调用。

下面是一个例子：

function getElementById(elementId) {
  return function () {
    return $('#' + elementId);
  }
}

var element = getElementById('element-id')();

function someFunction() {
    element.css('color', 'red');
}

在这个例子中，我们首先定义了一个getElementById这个函数。这个函数接收一个elementId参数，然后返回一个闭包函数。这个闭包函数返回了一个选择器$('#' + elementId)，用来获取对应id的元素。

在someFunction()这个函数中，我们通过调用element.css('color', 'red')来对获取到的元素进行操作。

结论

以上是关于如何储存元素id的三种方法，每种方法都有其优缺点。在项目中选择适合自己的方法有助于提高代码的质量和开发效率。

• 使用全局变量：简单易用，但容易与其他全局变量冲突。
• 使用data属性：可以将元素id储存在DOM元素本身之中，方便操作，但是需要增加额外的属性。
• 使用闭包：灵活度高，可以根据需要决定何时获取元素，封装性好，但是需要多写几行代码。