0

私はこのようなテーブル構造を持っています

<tr>
    <td>
      Text to move
    </td>
</tr>
<tr>
    <td>
       <div>jQuery slider container is in here<a>slider pointer is in here</a></div>
    </td>
</tr>

スライダーが移動すると、リンク要素のスタイルが右にどれだけ離れているかを表すパーセンテージで更新されます。例：style="left: 11.7647%;"「テキストを移動」してスライダーに合わせ、そのパーセンテージで移動します。これを行う方法はありますか？必要に応じて、div/spanなどを追加できます。

注：スライダーが移動したパーセンテージを取得する方法を知っています。問題はスライダーを揃えることです。

4

1 に答える 1

0

パーセンテージはすでにわかっているので、同じパーセンテージの左マージンを持つようにテキストを設定できます。

$("#hoverText").css("margin-left", percent + "%");

これが私の動作するテストコードです：

HTML

<table id="layoutTable" style="width:100%;">
  <tr>
    <td>Percent: <span id="percent"></span></td>
  </tr>
  <tr>
    <td style="width:100%;"><span id="hoverText">Here's Some Text</span></td>
  </tr>
  <tr>
    <td style="width:100%;"><div id="slider"></div></td>
  </tr>
</table>

JavaScript

$(document).ready(function(){
  $("#slider").slider({
    "slide": function(event, ui) {
      var percent = ui.value;
      $("#percent").html(percent);
      $("#hoverText").css("margin-left", percent + "%");
    }
  });
});
于 2011-10-08T20:21:04.223 に答える