对齐文本采用了滑盖

Question

我有这样

<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 /跨度等。

注：我知道如何抓住滑块已移动的百分比，问题只是对齐它。

Answer 1

既然你已经知道了百分比，您可以将文本设置为具有相同的百分比的左边距：

$("#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 + "%"); 
    } 
    }); 
});