代码如下:
我设置两个不同的ID,想点击文本框获取各自选择的值,现在我设置的选择,都是取得了一样的值,不是我想要的结果。如何解决呢?在线等待高手
<div class="right">
<input type="text" id="picktime" value="18:00" readonly>--<input type="text" id="picktime1" value="20:00" readonly>
</div>
<script> $(function (){
$('#picktime,#picktime1').mtimer();
});
</script>
我设置两个不同的ID,想点击文本框获取各自选择的值,现在我设置的选择,都是取得了一样的值,不是我想要的结果。如何解决呢?在线等待高手
<div class="right">
<input type="text" id="picktime" value="18:00" readonly>--<input type="text" id="picktime1" value="20:00" readonly>
</div>
<script> $(function (){
$('#picktime,#picktime1').mtimer();
});
</script>
$("input").click(function(){
alert($(this).val())
})
$("#picktime").click(function(){
var picktime=$(this).val();
var picktime1=$("#picktime1").val();
});$("#picktime1").click(function(){
var picktime1=$(this).val();
var picktime=$("#picktime").val();
});
<div class="right">
<input type="text" id="picktime" value="18:00" readonly>-- <input type="text" id="picktime1" value="20:00" readonly>
</div>
<script>
$("#picktime").click(function(){
var picktime=$(this).mtimer();
var picktime1=$("#picktime1").mtimer();
});
$("#picktime1").click(function(){
var picktime1=$(this).mtimer();
var picktime=$("#picktime").mtimer();
});
</script>
加进去以后虽然一个可以获得值,另一个确不行。
我要实现的效果是
点击上面的个一个时间input,弹出下面这个选择时间器然后返回值给input,现在只能选一个,返回正确值
<html lang="zh"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
</head> <body>
<div class="right">
<input type="text" id="picktime" value="18:00" readonly>
<input type="text" id="picktime1" value="20:00" readonly>
</div>
<script>
$("#picktime").click(function() {
var picktime = $(this).val();
var picktime1 = $("#picktime1").val();
alert(picktime);
});
$("#picktime1").click(function() {
var picktime1 = $(this).val();
var picktime = $("#picktime").val();
});
</script>
</body></html>
$.fn.mtimer = function(opts){
var defaults = {
dateStart : new Date(),
dateNum : 24,
timeStart :0,
timeNum : 60,
onOk : null,
onCancel : null,
};
var option = $.extend(defaults, opts); var input = $(this),
itemHeight = 48;
var picker = {
init : function(){
var _this = this; _this.renderHTML(); var container = $('.mt_poppanel'),
mpDate = $('.mt_date', container),
mpTime = $('.mt_time', container);
//初始化date
var dateStr = '',
dateStart = option.dateStart,
sYear = dateStart.getFullYear(),
sMonth = dateStart.getMonth(),
sDate = 1;
for(var i=0; i<option.dateNum; i++){
var nextDate = new Date(sYear, sMonth, sDate+i),
m = nextDate.getMonth()+1,
d = nextDate.getDate(),
da = nextDate.getDay(),
w = '日一二三四五六'.charAt(da),
sel = i == 0 ? 'selected' : '';
if(m < 10){
m = '0' + m;
}
if(d < 10){
d = '0' + d;
}
if(d == 24){
d = '0' + 0;
}
dateStr += '<li class="'+sel+'" data-date="'+d+'">'+d+'时</li>';
}
dateStr += '<li></li><li></li>';
mpDate.find('ul').append(dateStr);
//初始化time
var timeStr = '';
for(var j=0; j<option.timeNum; j++){
var t = option.timeStart + j,
sel = j == 0 ? 'selected' : '';
if(j<10){
timeStr += '<li class="'+sel+'" data-time=":0'+t+'">0'+t+'分</li>';}
if(j>10){
timeStr += '<li class="'+sel+'" data-time=":'+t+'">'+t+'分</li>';
}
}
timeStr += '<li></li><li></li>';
mpTime.find('ul').append(timeStr); document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
//初始化scroll
var elHeight = itemHeight;
var dateScroll = new IScroll('.mt_date', {
snap : 'li',
probeType : 2,
tap : true
});
dateScroll.on('scroll', function(){
_this.updateSelected(mpDate, this);
});
dateScroll.on('scrollEnd', function(){
_this.updateSelected(mpDate, this);
});
var timeScroll = new IScroll('.mt_time', {
snap : 'li',
probeType : 2,
tap : true
});
timeScroll.on('scroll', function(){
_this.updateSelected(mpTime, this);
});
timeScroll.on('scrollEnd', function(){
_this.updateSelected(mpTime, this);
}); this.dateScroll = dateScroll;
this.timeScroll = timeScroll; //初始化点击input事件
input.on('tap', function(){
if(container.hasClass('show')){
_this.hidePanel();
}
else{
_this.showPanel();
}
}); //初始化点击li
mpDate.find('li').on('tap', function(){
_this.checkDate($(this));
});
mpTime.find('li').on('tap', function(){
_this.checkTime($(this));
}); //初始化点击事件
$('.mt_ok', container).on('tap', function(){
var date = mpDate.find('.selected').data('date');
var time = mpTime.find('.selected').data('time');
input.val(date + ' ' + time);
_this.hidePanel();
option.onOk && typeof option.onOk=='function' && option.onOk(container);
});
$('.mt_cancel', container).on('tap', function(){
_this.hidePanel();
option.onCancel && typeof option.onCancel=='function' && option.onCancel(container);
});
$('.mt_mask').on('tap', function(){
_this.hidePanel();
}); //初始化原有的数据
this.setValue();
},
renderHTML : function(){
var stime = option.timeStart + ':00';
var etime = option.timeStart + option.timeNum + ':00';
var html = '<div class="mt_mask"></div><div id="mtimer" class="mt_poppanel"><div class="topbar"><div class="left-right-box2"><a href="javascript:history.go(-1)"><img src="img/arrow.png"></a></div><div class="center-box1">生效时间段</div><div class="left-right-box"><a href="javascript:void(0);" class="mt_ok a2">确定</a></div><div class="clr"></div></div><div class="shijian-box weizhi1"><div class="left lh pd_5">执行时间</div><div class="right pd_3">18:00 -- 20:00</div><div class="clr"></div></div><a href="again.html"><div class="shijian-box weizhi2"><div class="left lh">重复<br><span class="txt12 white">执行一次</span></div><div class="right"><img src="img/arrow_blue_right.png"></div><div class="clr"></div></div></a><div class="mt_panel"><div class="mt_body"><div class="mt_date"><ul><li class="mt_note"> </li><li></li></ul></div><div class="mt_time"><ul><li class="mt_note"> </li><li></li></ul></div><div class="mt_indicate"></div></div></div></div></div>';
$(document.body).append(html);
},
updateSelected : function(container, iscroll){
var index = (-iscroll.y) / itemHeight + 2;
var current = container.find('li').eq(index);
current.addClass('selected').siblings().removeClass('selected');
},
showPanel : function(container){
$('.mt_poppanel, .mt_mask').addClass('show');
},
hidePanel : function(){
$('.mt_poppanel, .mt_mask').removeClass('show');
},
setValue1 : function(){
var value = input.val();
var dateArr = value.split(' '),
date = dateArr[0],
time = dateArr[1],
dateItem = $('.mt_date li[data-date="'+date+'"]'),
timeItem = $('.mt_time li[data-time="'+time+'"]');
this.checkDate(dateItem);
this.checkTime(timeItem); },
checkDate : function(el){
var target = el.prev('li').prev('li');
this.dateScroll.scrollToElement(target[0]);
},
checkTime : function(el){
var target = el.prev('li').prev('li');
this.timeScroll.scrollToElement(target[0]);
}
}
picker.init();
return picker;
}
return $.fn.mtimer;
})(Zepto);插件代码如上,如何修改可以同时调用多次使用,选中后返回值给不同的ID文本框