使用按钮绑定变量的更有效方法？

Question

我有3个不同的按钮，点击它们会将特定变量增加1。 而不是写出3个不同的点击次数，是否有更有效的方法来做到这一点？ 我知道我可以使用数据属性来绑定具有正确元素的按钮，但我不知道如何使用变量。

var x1 = 0;
var x2 = 0;
var x3 = 0;


$('.btn1').on('click', function() {
  x1 += 1;
  $('#panel1').html(x1);
});
$('.btn2').on('click', function() {
  x2 += 1;
  $('#panel2').html(x2);
});
$('.btn3').on('click', function() {
  x3 += 1;
  $('#panel3').html(x3);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="panel1">
  0
</div>
<div id="panel2">
  0
</div>
<div id="panel3">
  0
</div>
<button class="btn1">#btn1</button>
<button class="btn2">#btn2</button>
<button class="btn3">#btn3</button>

Answer 1

与往常一样，使用函数来抽象重复的代码。

function counter(buttonSelector, outputSelector) {
  var x = 0;
  $(buttonSelector).on('click', function() {
    x += 1;
    $(outputSelector).text(x); // btw, don't use `html`
  });
}
counter('.btn1', '#panel1');
counter('.btn2', '#panel2');
counter('.btn3', '#panel3');

你可以通过将这些调用（或只是函数体）放在一个循环中来进一步删除重复，和/或适当调整你的选择器，但是对于三次调用它还不值得。

Answer 2

为它们提供相同的类并使其成为一个单击侦听器，并使用变量名称和面板名称在每个按钮上放置数据attr。像这样的东西，将所有变量放在一个对象中，这样你也可以访问它们，如果它们是全局变量你可以像这个窗口一样访问它们[variableName]

Answer 3

我会给你的按钮一个公共类，或者你可以将你的click事件绑定到按钮元素，如果你没有其他你需要担心的。然后使用单击按钮的索引将其与要更改的div匹配。基本上是一个单行：

$('button').on('click', function() {
  $('div').eq($(this).index('button')).html(+$('div').eq($(this).index('button')).text() + 1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="panel1">
  0
</div>
<div id="panel2">
  0
</div>
<div id="panel3">
  0
</div>
<button class="btn1">#btn1</button>
<button class="btn2">#btn2</button>
<button class="btn3">#btn3</button>

零件解释：

• $(this).index('button')获取按钮元素中按钮的索引。见.index()。
• $('div').eq($(this).index('button')).text()使用上面的索引选择div。请参阅.eq()
• +将div的字符串内容转换为数字。也可以使用parseInt()

Answer 4

将计数存储在数据属性中而不是变量中。

$('button[data-out]').on('click', function() {  // bind on every button
// $(document).on('click, 'button[data-out]', function() { // or use event delegation with one click event
  var btn = $(this) // reference the element
  var cnt = (btn.data('count') || 0) + 1  // read count or default to zero and increment
  btn.data('count', cnt)  // update the count data attribute
  $(btn.data('out')).text(cnt)  // update your text output
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="panel1">
  0
</div>
<div id="panel2">
  0
</div>
<div id="panel3">
  0
</div>
<button class="btn1" data-out="#panel1">#btn1</button>
<button class="btn2" data-out="#panel2">#btn2</button>
<button class="btn3" data-out="#panel3">#btn3</button>

Answer 5

您可以使用数组而不是多变量。 现在给所有按钮一个特定的类，如btn。 然后：

FPRUtility.bat -project [Your .fpr file] -information -search -query "[fortify priority order]:critical"
FPRUtility.bat -project [Your .fpr file] -information -search -query "[fortify priority order]:high"
FPRUtility.bat -project [Your .fpr file] -information -search -query "[fortify priority order]:medium"
FPRUtility.bat -project [Your .fpr file] -information -search -query "[fortify priority order]:low"

Answer 6

• 将变量存储为对象的属性。
• 在每个按钮上使用data-*属性来存储变量 应该匹配。
• 将所有按钮绑定到一个处理程序。
• 在处理程序中，检查单击按钮的data-属性和 根据需要更新关联的Object属性。

let variableObject = {
 x1:0,
 x2:0,
 x3:0
}

$('.btn').on('click', function() {
  variableObject[this.dataset.key]++;
  $('#panel' + this.dataset.key.charAt(1)).text(variableObject[this.dataset.key]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="panel1">0</div>
<div id="panel2">0</div>
<div id="panel3">0</div>
<button class="btn" data-key="x1">#btn1</button>
<button class="btn" data-key="x2">#btn2</button>
<button class="btn" data-key="x3">#btn3</button>

话虽如此，你真的需要变量吗？为什么你不能直接调整HTML内容，只要你需要那些数据就可以解压缩。

$('.btn').on('click', function() {
  // Get current value of associated panel
  let current = $("#" + $(this).data("key")).text();
  
  // Set text of associated panel to old value plus one
  $("#" + $(this).data("key")).text(++current);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="panel1">0</div>
<div id="panel2">0</div>
<div id="panel3">0</div>
<button class="btn" data-key="panel1">#btn1</button>
<button class="btn" data-key="panel2">#btn2</button>
<button class="btn" data-key="panel3">#btn3</button>

Answer 7

像这样的东西

vars = {
  'x1':0,
  'x2':0,
  'x3':0
}

$('.btn').on('click', function(){
  var vn = $(this).data('varname');
  var ps = $(this).data('panel-selector');
  vars[vn] += 1;
  $(ps).text(vars[vn]);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="panel1">
  0
</div>
<div id="panel2">
  0
</div>
<div id="panel3">
  0
</div>
<button class="btn" data-varname='x1' data-panel-selector='#panel1'>#btn1</button>
<button class="btn" data-varname='x2' data-panel-selector='#panel2'>#btn2</button>
<button class="btn" data-varname='x3' data-panel-selector='#panel3'>#btn3</button>

的 UPD： 对于变量可以使用eval，但这不安全且无用。 请勿使用此功能，仅用于演示。

var x1 = 0;
var x2 = 0;
var x3 = 0;

$('.btn').on('click', function(){
  var vn = $(this).data('varname');
  var ps = $(this).data('panel-selector');
  eval(vn + '+=1');
  $(ps).text(eval(vn));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="panel1">
  0
</div>
<div id="panel2">
  0
</div>
<div id="panel3">
  0
</div>
<button class="btn" data-varname='x1' data-panel-selector='#panel1'>#btn1</button>
<button class="btn" data-varname='x2' data-panel-selector='#panel2'>#btn2</button>
<button class="btn" data-varname='x3' data-panel-selector='#panel3'>#btn3</button>

Answer 8

使用id或任何属性和数组的方法：

var x = [];
    x[1] = 0;
    x[2] = 0;
    x[3] = 0;


$('.btn').on('click', function() {
  var pos = $(this).attr("id");
  x[+pos] += 1;
  $('#panel'+pos).html(x[pos]);
});

HTML中的

：

<button class="btn" id="1">#btn1</button>
<button class="btn"  id="2">#btn2</button>
<button class="btn"  id="3">#btn3</button>

Answer 9

这是一个生成初始变量的版本，因此它应该是可扩展的。

bindVars = {}

$('[data-bind-id]').each(function() {
  var xi = "x" + $(this).data('bind-id');
  var pi = "#panel" + $(this).data('bind-id');
  bindVars[xi] = 0;
  $(this).on('click', function() {
    bindVars[xi] += 1;
    $(pi).text(bindVars[xi]);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="panel1">0</div>
<div id="panel2">0</div>
<div id="panel3">0</div>
<button data-bind-id='1'>#btn1</button>
<button data-bind-id='2'>#btn2</button>
<button data-bind-id='3'>#btn3</button>

Answer 10

您可以添加每个按钮HTML SELECT ac.AccountID as ID, max(case when c.name = 'email' then c.data end) email, max(case when c.name = 'phone' then c.data end) phone from Contacts c left join AccountContacts ac on ac.ContactID = c.id group by ac.AccountID; 事件并创建一个功能。

onclick

function add() {
  this.innerHTML(parseInt(this.innerHTML()) + 1);
}