javascript - 使用数据属性通过 Jquery 定位和更新变量

Question

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

Link to JSFiddle

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()。