多个滑块onMouseOut事件

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

你的意思是这样吗?

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

Answer 2

我不确定你实际上想要实现什么。我想把你的两个问题的答案贴出来。

要设置文本框输入的值，可以这样做:

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/