Question

基本上我有一个jQuery滑块。单击文本框时，将显示滑块div。这是我的HTML代码：

<div id="menu">
            <ul>
                <li><a href="JavaScript:getLiveTraffic()">Live Traffic Condition</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">About Us</a></li>
            </ul>
        </div>

这是动态创建的html组件，它们是在选择菜单项时创建的：

function getLiveTraffic() {

var htmlStr = "<table style='width:100%;font-size:12px;text-align:center;height:90px;'>";
htmlStr += "<tr><td><input id='timeI' style='width:100px;' onClick='getStartTime();' placeholder='Start Time'></input></td><td><input id='timeII' style='width:100px;' onClick='getEndTime();' placeholder='End Time'></input></td></tr>";

htmlStr += "<tr><td><div style='display:none;width:120px;padding:5px;margin-left:auto;margin-right:auto;background: linear-gradient(white, #F2F2F2);' id='timePicker'>";
htmlStr += "<div style='width:120px;margin-bottom:8px;' id='hour'></div>";
htmlStr += "<div style='width:120px;' id='min'></div>"; 
htmlStr += "<span id='hourd'>0:</span><span id='mind'>00</span>";
htmlStr += "</div></td>";

document.getElementById("divGetLiveTraffic").innerHTML = htmlStr;
}

我的JavaScript调用getStartTime（）：

function getStartTime()
{
    $("#hour").slider({max: 23});
        $("#hour").on("slide", function(event, ui)
        {
            document.getElementById("hourd").innerHTML = ui.value + ":";
            ;
        });
        $("#min").slider({max: 59});
        $("#min").on("slide", function(event, ui)
        {
            document.getElementById("mind").innerHTML = ui.value + "";
            ;
        });
        $("#timeI").click(function(evt) {
            $("#timePicker").show();
        });

}

然后滑块下方的span类会在滑动时更改值。但是，我不确定如何将值设置为文本框输入。

此外，当通过滑动滑块完成选择时间时，时间id应该隐藏。我不确定如何执行onMouseOut事件以及因为有两个滑块。

提前致谢。

Answer 1

我不确定你真正想要实现的目标。我想为你的两个问题发一个答案。

要将值设置到文本框输入中，您可以这样：

HTML：

<input type="text" id="time1">

JavaScrit（jQuery的）：

$("#time1").val("new value");

.val()的文档在这里：http://api.jquery.com/val/

当鼠标不在div时做某事：

HTML：

<div id="myarea">
   myarea
</div>

JavaScrit（jQuery的）：

$( "#myarea" ).mouseout(function() {
  // now mouse is out of 'myarea'
});

.mouseout()的文档在这里：http://api.jquery.com/mouseout/

希望这有帮助。

Answer 2

你的意思是这样吗？

$("#divGetLiveTraffic").on("click", "timeI", function(){
  $(this).val($("#hourd").text() + $("#mind").text());
});

$("divGetLiveTraffic").on("mouseout", "timeI", function(){
  //.........
});

多个滑块onMouseOut事件

2 个答案: