Блог

В принципе, у меня есть один ползунок 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 под ползунком изменяет значение при его перемещении. Однако я не уверен, как установить значение во ввод текстового поля.

Кроме того, когда вы закончите выбирать время, сдвинув ползунок, идентификатор времени должен скрываться. Я не уверен, как выполнить событие onMouseOut, потому что есть два ползунка.

Заранее спасибо.

Вы имеете в виду что-то вроде этого?

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

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

Я не уверен, чего вы на самом деле пытаетесь достичь. Я хотел бы опубликовать ответ на ваши два вопроса.

Чтобы задать значение для ввода в текстовое поле, вы можете сделать это следующим образом:

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 /

Надеюсь, это поможет.