为具有绑定价值的多个事件编写相同的变量

Let say we have 2 variable that use in multiple events.

假设我们有两个在多个事件中使用的变量。

But each variable take value from event itself.

但每个变量都取自事件本身的价值。

For example

$('#el1').click(function() {
    var a = $('#inp').val(); //same as a below event
    var b = $(this).attr('for'); //same as b below event
    data = { c1 : a, c2 : b };
});

$('#el2').click(function() {
    var a = $('#inp').val(); // same as a above event
    var b = $(this).attr('for'); // same as b above event
    data = { f1 : a, f2 : b };
});

In above code that wrote same variable for some events. Each variable has same element attribute but also will bind different value, cause the variable put into different event.

在上面的代码中为某些事件编写了相同的变量。每个变量都具有相同的元素属性,但也会绑定不同的值,导致变量放入不同的事件中。

You know we only need wrote same variable at once. without make same variable twice in it events.

你知道我们只需要一次编写相同的变量。没有在事件中两次使相同的变量。

Then how to do..?

那怎么办..?

1 个解决方案

#1

If you want to do this, you need to use global variables. This explains the rules for javascript variable scope.

如果要执行此操作,则需要使用全局变量。这解释了javascript变量范围的规则。

Generally, global variables should be used sparingly, to avoid getting them mixed up throughout your code. Also, there are problems with what you want to do.

通常,应谨慎使用全局变量,以避免在整个代码中混淆它们。此外,您想要做的事情也存在问题。

Let's look at b first. You are thinking that they are the "same variable." But they aren't: this refers to el1 in your first event, and it refers to el2 in your second event. So, just because you are defining them with the same code, they are not going to be the same value. You need to keep them separate.

我们先来看看b。你认为它们是“同一个变量”。但它们不是:这是指第一次事件中的el1,它指的是第二次事件中的el2。因此,仅仅因为您使用相同的代码定义它们,它们将不会是相同的值。你需要将它们分开。

Now, suppose you do create a global variable for a, like this:

现在,假设您确实为a创建了一个全局变量,如下所示:

var a = $('#inp').val(); 

$('#el1').click(function() {
    var b = $(this).attr('for'); 
    data = { c1 : a, c2 : b };
});

$('#el2').click(function() {
    var b = $(this).attr('for'); // same as b above event
    data = { f1 : a, f2 : b };
});

When you do this, a will equal the value of your inp element at the point in time that you declare the variable. That value will have changed by the time that you fire your click event, so you will have an error that will be very hard to find if you don't understand this.

执行此操作时,a将等于声明变量的时间点的inp元素的值。在您点击事件时,该值将发生变化,因此如果您不理解这一点,您将会遇到很难找到的错误。

If you really want to, you can do a global variable like this:

如果你真的想,你可以像这样做一个全局变量:

var a = $('#inp');

and then in your handler:

然后在你的处理程序中:

data = { c1 : a.val(), c2 : b }

This will work because the reference to your inp element will remain the same as long as the page runs. But val() will change, so you can't include it.

这将起作用,因为只要页面运行,对inp元素的引用将保持不变。但是val()会改变,所以你不能包含它。

While it does save some processor work to avoid getting the element multiple times by storing a reference to it in a variable, you have to balance that against adding complications to your code. Development overhead can be a lot more expensive than performance overhead. (If that weren't true, nobody would be using jQuery, since plain old javascript runs faster and takes up less space.) For this reason, I don't recommend that you do this. The only reason that it makes sense to use your a and b variables at all is that it makes the line that assigns your data variable easier to read. As such, it's best to leave them as they are.

虽然它确实节省了一些处理器工作以避免通过在变量中存储对元素的引用来多次获取元素,但是您必须平衡它以防止为代码添加复杂性。开发开销可能比性能开销昂贵得多。 (如果不是这样,没有人会使用jQuery,因为普通的旧javascript运行速度更快,占用的空间更少。)因此,我不建议你这样做。使用a和b变量有意义的唯一原因是它使分配数据变量的行更容易阅读。因此,最好将它们保持原样。

The best time to store a property of a DOM element to a variable is if you are referencing it in a loop, and it doesn't change while you're in that loop. In that case I would say that it's best practice to do so.

将DOM元素的属性存储到变量的最佳时间是在循环中引用它,并且当您在该循环中时它不会更改。在这种情况下,我会说这是最好的做法。

#1