Question

我想知道如何使用数据属性来定位和更新变量。

HTML

<label>Update Foo</label>
<input type="range" class="slider"  min="1" max="100" step="1" value="50" data-var="foo">

<label>Update Bar</label>
<input type="range" class="slider"  min="1" max="100" step="1" value="10" data-var="bar">

的JavaScript

var foo = 50, // when slider is changed these variables are updated
        bar = 10;

// update global variable
function updateVariable(variable, value) {
  variable = value;
  console.log(foo);
  console.log(bar);

  // other function called here that uses foo and bar
}

// input even listener
$('.slider').on("change mousemove", function() {
    updateVariable($(this).data("var"), $(this).val());
});

我想知道如何做到这一点的原因是因为我试图找到一种方法来使多个输入元素更新变量，同时保持JS简单。这就是为什么事件不只是设置foo = $(this).val()之前我为每个输入元素创建事件监听器和函数 - 所以，我想知道一种更有效的方法来处理这个

Answer 1

要执行此操作，您需要将三个内容传递给updateVariable()方法;要更新的元素，要更新的data-*属性的名称以及要设置的值。像这样：

// update global variable
function updateVariable(el, dataAttr, value) {  
    $(el).data(dataAttr, value);
}

// input even listener
$('.slider').on("change mousemove", function() {
    updateVariable(this, 'var', this.value);
});

Working example

话虽如此，我认为这种提取完全是多余的。您所做的只是包装jQuery自己的data()方法，并且不添加额外的业务逻辑或功能。您也可以从每个事件处理程序中调用data()。

Answer 2

使用的方法无法正常工作。它基本上是在说$(this).data("var") = $(this).val()而不是更新变量 - 这是目标。为解决此问题，我将foo和bar属性作为对象。

var myObject = {
    foo: 50,
    bar: 10
};

// input even listener
$('.slider').on("input", function() { //remove mouseover event to hide spam
    myObject[$(this).data("var")] = $(this).val();
    console.log("Foo: " + myObject.foo + " Bar: " + myObject.bar);
});

// Alternatively you can access properties objects like this  myObject["foo"] as well.

<强> Working Example

这样可以轻松访问这些属性，并允许以更简单的方式更新它们。

使用数据属性使用Jquery来定位和更新变量

2 个答案: