對齊文本採用了滑蓋

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