javascript - 如何将处理程序/函数附加到不同的对象

Question

需要了解如何定义 jQuery UI slider 并将其绑定(bind)到页面上的不同对象。

function setPhraseFontSize() {
  f1 = $("#slider").slider("value");
  f1 = 30 - (f1 * 15);
  f2 = $("#slider").slider("value");
  f2 = 30 + (f2 * 15);
  $("#phrase1").css({
    'font-size': f1 + 'pt'
  });
  $("#phrase2").css({
    'font-size': f2 + 'pt'
  });
}

$("#slider").slider({
  value: 0,
  min: -1,
  max: 1,
  step: 0.1,
  stop: function(event, ui) {
    setPhraseFontSize();
    $('input[name="weighting"]').val($("#slider").slider("value"));

    mydata = $('#feedback').serialize();

    alert("AJAX POST: " + mydata);
  }
});

    <link href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<form id="feedback">
  <input type="hidden" name="phrase1" value="old">
  <input type="hidden" name="phrase2" value="new">
  <input type="hidden" name="weighting">
</form>
<table width="100%">
  <tr style="height:100px">
    <td>
      <div id="phrase1" style="text-align: left;">old</div>
    </td>
    <td>
      <div id="phrase2" style="text-align: right;">new</div>
    </td>
  </tr>
</table>
<div id="slider"></div>

我有一对短语，并使用 UI slider 让用户指定它们之间的权重。我有一个带有隐藏字段的表单，然后当停止甚至触发时，我从该表单中选取短语并从 slider 中获取权重，然后通过 ajax 调用将它们发回。这一切都运行良好。

现在我想更改页面，而不是每次往返只有一个配对，我想用短语对填充整个页面，并允许用户浏览每个短语并选择上面的权重。显然，我不想重复所有代码等，但完全不清楚如何一次且一次地指定 slider 处理程序。理想情况下， slider 也将创建一次，然后在获得焦点时在每个配对上可见。当它触发其停止事件时，它当然应该获取当前的配对并将这些短语和适当的权重传递给 ajax 调用。

执行此操作的最佳实践方法是什么？

Answer 1

在 slider 元素上使用通用类名可能是最简单的方法。

function setPhraseFontSize(sliderNum, value) {
	f1 = 30 - (value * 15);
  	$("#phrase" + sliderNum).css({
		'font-size': f1 + 'pt'
  	});
}


$(".slider").slider({
  value: 0,
  min: -1,
  max: 1,
  step: 0.1,
  stop: function(event, ui) {
    var sliderNum = $(this).attr("id").replace("slider", "");
    var value = $(this).slider("value");
    setPhraseFontSize(sliderNum, value); // Pass the sliderNum and the value
    $('input[name="weighting'+ sliderNum +'"]').val(value); // Target 'this' instead

    mydata = $('#feedback').serialize();

    alert("AJAX POST: " + mydata);
  }
});

<link href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>


<!-- As per Drew Gaynor's comment - you should really be using a JS MV* framework (or at least some JS template tool) to output this HTML //-->

<form id="feedback">
  <input type="hidden" name="weighting1">
  <input type="hidden" name="weighting2">
</form>

<table width="100%">
  <tr style="height:100px">
    <td>
      <div id="phrase1_old" style="text-align: left;">old</div>
    </td>
    <td>
      <div id="phrase1" style="text-align: right;">new</div>
    </td>
  </tr>
</table>
<div id="slider1" class='slider'></div>

<table width="100%">
  <tr style="height:100px">
    <td>
      <div id="phrase2_old" style="text-align: left;">old</div>
    </td>
    <td>
      <div id="phrase2" style="text-align: right;">new</div>
    </td>
  </tr>
</table>
<div id="slider2" class='slider'></div>

如果您只想在任何时间拥有一个 slider 实例(尽管这可能会在除大量 slider 之外的所有 slider 中过度设计它)，您将需要绑定(bind)到 mouseover每个“短语”div 上的 mouseout 事件，其中 mouseover 事件启动插件代码，mouseout 事件调用 dispose.