js如何用不同id的调用同一个函数取得各自不同的值？急急急

jim409230239 2018-08-28 12:32:12
代码如下：
我设置两个不同的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>
...全文
563 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
Eighteen Z 2018-08-29
  • 打赏
  • 举报
 回复
直接onclick绑定到行内试试。按理说分开绑定是没问题的啊
jim409230239 2018-08-29
  • 打赏
  • 举报
 回复
(function ($) {
$.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文本框
qq_20113959 2018-08-29
  • 打赏
  • 举报
 回复
<!DOCTYPE html>
<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>
天际的海浪 2018-08-29
  • 打赏
  • 举报
 回复
这根本问题是你用的插件本身在多例应用时有bug。除了修改插件内部代码之外没有别的办法
jim409230239 2018-08-28
  • 打赏
  • 举报
 回复
我把代码加进去了，还是不行
<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,

现在只能选一个，返回正确值
田小瘦 2018-08-28
  • 打赏
  • 举报
 回复
如果不需要同时获取俩个值,就去掉另外一个
田小瘦 2018-08-28
  • 打赏
  • 举报
 回复
你这是俩个文本框, 你是想点击任意一个文本框都获得两个的值吗? 你可以给俩个input都定义点击事件, 点击任何一个的时候,都同时取俩个的值,
$("#picktime").click(function(){
var picktime=$(this).val();
var picktime1=$("#picktime1").val();
});

$("#picktime1").click(function(){
var picktime1=$(this).val();
var picktime=$("#picktime").val();
});
Logerlink 2018-08-28
  • 打赏
  • 举报
 回复
用this关键词
$("input").click(function(){
alert($(this).val())
})
JavaScript 中的 slice 方法详解：逐步学习和深度解剖
求位于先序序列中第k 个位置的结点的值 问题：求位于先序序列中第k 个位置的结点的值【问题描述】求位于先序序列中第k 个位置的结点的值【输入形式】先序序列构造二叉树，结点数据类型为字符型，空结点用'#快速入门 JavaScript 的 slice 方法：新手教 在 JavaScript 中，slice() 是一个常用的数组方法，用于从现有数组中提取一部分元素，然后返回一个新的数组。它是一个非常有用的工具，可以帮助你在不农发笔面经 笔
Vue基础教程（31）Vue.js语法之创建应用程序实例：别懵了！Vue应用的“出生证明”：createApp才是灵魂注入术！[特殊字符]
想玩转Vue 3？第一步createApp就是你的入场券！这家伙可不是随便调用的函数，它是你整个Vue应用的“总导演”，负责搭建舞台、选定主角、配置道具。本文将用最接地气的方式，带你深度解剖createApp的每一个细节，从避免新手常踩的“全局API”大坑，到如何优雅配置全局组件、指令等“神兵利器”。最后还会附上一个完整示例，手把手教你从零“造”出一个活生生的Vue应用。理解它，你的Vue之旅才算真正入门！
asp.net常用函数
Abs(number) 取得数值的绝对值。   Asc(String) 取得字符串表达式的第一个字符ASCII 码。   Atn(number) 取得一个角度的反正切值。   CallByName (object, procname, usecalltype,[args()]) 执行一个对象的方法、设定或传回对象的属性。   CBool(expression) 转换表达式为Boolean 型态。 
js编写倒计时-距离开始时间距离结束时间-结束
前言 经过10.1 急急忙忙的上线国庆专题，导致当时没有写一套自动切换时间的，所以让小同事在凌晨的时候替换页面完成，所以节后为了方便以后使用，编写了一套倒计时的小例子， 希望以后在有相似的时候，可以用上。 这个效果主要是利用js 完成 距离活动还有多长时间开始， 距离多长时间 结束，还有活动结束的时候停止。 <div> <p> <span id="t...
【JavaScript】(1)基础语法
1. 添加JavaScript脚本用标签包含起来例如： document.write("helle"); type是告诉浏览器，我们插入的是文本类型，使用的脚本是JavaScript。 我们也可以自己创建js文件，以js后缀命名。在html使用： 来引用。 2. JS在页面中的位置： 我们可以将JavaScript代码放在html文件中任何位置，但是我们一般放
JavaScript

87,993

社区成员

224,694

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章