Question

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

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滑块让用户指定它们之间的权重。我有一个隐藏字段的表单，然后当停止甚至触发时，我从这个表单中获取短语并从滑块中获取重量，然后通过ajax调用将它们发回。一切正常。

现在我想更改页面，而不是每次往返只有一个配对，我想用成对的短语填充整个页面，并允许用户通过每个工作并选择如上所述的权重。显然，我不想复制所有的代码等，但我一点也不清楚如何只指定一次滑块处理程序。理想情况下，滑块也会创建一次，然后在每次配对时都会显示，因为它会获得焦点。当它触发停止事件时，它当然应该选择当前的配对并将这些短语和适当的权重传递给ajax调用。

这样做的最佳做法是什么？

Answer 1

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

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>

如果您打算在任何时候只有一个滑块实例（尽管这可能会在除了大量滑块之外的所有滑块上进行过度设计），您需要绑定到mouseover和{{ 1}}每个'词组'div上的事件，mouseout事件启动插件代码，mouseover事件调用mouseout。

Answer 2

我会为每对短语创建不同的表单，使用相同的类。

然后你只需要在相应的上下文中查找元素，如下所示：

var currentWeight = $( 'input[name="weighting"]', $( this ) ).val();

在input。

的上下文中查找$( this )元素的位置

要只有一个滑块，请在用户对焦时将其移动到正确的形式：

$(".feedback").focusin(function() {
  $( this ).append( $("#slider") );
});

我留给你一个片段：

function setPhraseFontSize(feedback) {
  f1 = $("#slider").slider("value");
  f1 = 30 - (f1 * 15);
  f2 = $("#slider").slider("value");
  f2 = 30 + (f2 * 15);
  $(".phrase1", feedback).css({
    'font-size': f1 + 'pt'
  });
  $(".phrase2", feedback).css({
    'font-size': f2 + 'pt'
  });
}

$(".feedback").focusin(function() {
  if ($(this).children("#slider").length) return;
  var currentWeight = $( 'input[name="weighting"]', $( this ) ).val();
  $( this ).append( $("#slider") );
  $("#slider").slider( "value", currentWeight );
});

$("#slider").slider({
  value: 0,
  min: -1,
  max: 1,
  step: 0.1,
  stop: function(event, ui) {
    setPhraseFontSize($(this).parent());
    $( 'input[name="weighting"]', $( this ).parent() ).val( $(this).slider("value") );
    mydata = $( this ).parent().serialize();
    alert( "AJAX POST: " + mydata );
  }
});

.feedback {
  border: 1px solid red;
  padding: 10px;
  margin: 10px;
}

<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_1" class="feedback" tabindex="0">
  <input type="hidden" name="phrase1" value="old">
  <input type="hidden" name="phrase2" value="new">
  <input type="hidden" name="weighting">
  <table width="100%">
    <tr style="height:100px">
      <td>
        <div class="phrase1" style="text-align: left;">old</div>
      </td>
      <td>
        <div class="phrase2" style="text-align: right;">new</div>
      </td>
    </tr>
  </table>
  <div id="slider"></div>
</form>
<form id="feedback_2" class="feedback" tabindex="0">
  <input type="hidden" name="phrase1" value="123">
  <input type="hidden" name="phrase2" value="abc">
  <input type="hidden" name="weighting">
  <table width="100%">
    <tr style="height:100px">
      <td>
        <div class="phrase1" style="text-align: left;">123</div>
      </td>
      <td>
        <div class="phrase2" style="text-align: right;">abc</div>
      </td>
    </tr>
  </table>
</form>

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

2 个答案: