效果图：
jquery判断输入框内是否有内容
简便jquery选座图js
<script>
function buy(){
$("#modal1").modal("show");
}
class Swiper {
constructor() {
this.w = $('.swiper-item').width();
this.num = 0;
this.len = $('.swiper .swiper-item').length - 1;
this.timer = null;
}
init() {
//设置定时器
this.setTime();
//滑上停止定时器
this.hover();
//点击指示
this.pointClick();
//点击左右箭头
this.lrClick();
}
setTime() {
this.timer = setInterval(() => {
this.num++;
if (this.num > this.len) {
this.num = 0;
}
let cssTrx = -this.num * this.w;
$('.swiper-point-item .point').eq(this.num).addClass('active').siblings().removeClass('active');
$('.swiper').css({transform: `translateX(${cssTrx}px)`})
}, 3000)
}
hover() {
$('.swiper-contione').hover(() => {
clearInterval(this.timer)
}, () => {
this.setTime();
});
}
pointClick() {
let that = this;
$('.swiper-point-item .point').click(function() {
that.num = $(this).index();
let cssTrx = -that.num * that.w;
$(this).addClass('active').siblings().removeClass('active');
$('.swiper').css({
transform: `translateX(${cssTrx}px)`
})
})
}
lrClick() {
$('.swiper-left img').click(() => {
this.num--;
if (this.num < 0) {
this.num = this.len;
};
console.log(this.num)
let cssTrx = -this.num * this.w;
$('.swiper-point-item .point').eq(this.num).addClass('active').siblings().removeClass('active');
$('.swiper').css({
transform: `translateX(${cssTrx}px)`
})
});
$('.swiper-right img').click(() => {
this.num++;
if (this.num > this.len) {
this.num = 0;
}
let cssTrx = -this.num * this.w;
$('.swiper-point-item .point').eq(this.num).addClass('active').siblings().removeClass('active');
$('.swiper').css({
transform: `translateX(${cssTrx}px)`
})
})
}
}
let sw = new Swiper();
sw.init();
jQuery.expr[':'].Contains = function(a, i, m) {
return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
function filterList(list) {
$('#js-groupId').bind('input propertychange', function() {
var filter = $(this).val();
if (filter) {
$matches = $(list).find('a:Contains(' + filter + ')').parent();
$('li', list).not($matches).slideUp();
$matches.slideDown();
} else {
$(list).find("li").slideDown();
}
});
}
$(function() {
filterList($("#groupid"));
$('#js-groupId').bind('focus', function() {
$('#groupid').slideDown();
}).bind('blur', function() {
$('#groupid').slideUp();
})
$('#groupid').on('click', 'li', function() {
$('#js-groupId').val($(this).text())
$('#groupId').val($(this).data('id'))
$('#groupid').slideUp()
});
})
function piao1() {
$("#modal1").modal("show");
$(document).ready(function() {
var $cart = $('#selected-seats1'), //座位区
$counter = $('#counter1'), //票数
$total = $('#total1'); //总计金额
var sc = $('#seat-map1').seatCharts({
map: [ //座位图
'aaaaaaaaaa',
'aaaaaaaaaa',
'__________',
'aaaaaaaa__',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aa__aa__aa'
],
naming: {
top: false,
getLabel: function(character, row, column) {
return column;
}
},
legend: { //定义图例
node: $('#legend1'),
items: [
['a', 'available', '可选座'],
['a', 'unavailable', '已售出']
]
},
click: function() { //点击事件
if (this.status() == 'available') { //可选座
$('<li>' + (this.settings.row + 1) + '排' + this.settings.label + '座</li>')
.attr('id', 'cart-item-' + this.settings.id)
.data('seatId', this.settings.id)
.appendTo($cart);
$counter.text(sc.find('selected').length + 1);
$total.text(recalculateTotal(sc)+price);
return 'selected';
} else if (this.status() == 'selected') { //已选中
//更新数量
$counter.text(sc.find('selected').length - 1);
//更新总计
$total.text(recalculateTotal(sc) - price);
//删除已预订座位
$('#cart-item-' + this.settings.id).remove();
//可选座
return 'available';
} else if (this.status() == 'unavailable') { //已售出
return 'unavailable';
} else {
return this.style();
}
}
});
//已售出的座位
sc.get(['1_2', '4_4', '4_5', '6_6', '6_7', '8_5', '8_6', '8_7', '8_8', '10_1', '10_2']).status('unavailable');
});
}
var price = 80; //票价
function piao() {
$("#modal").modal("show");
$(document).ready(function() {
var $cart = $('#selected-seats'), //座位区
$counter = $('#counter'), //票数
$total = $('#total'); //总计金额
var sc = $('#seat-map').seatCharts({
map: [ //座位图
'aaaaaaaaaa',
'aaaaaaaaaa',
'__________',
'aaaaaaaa__',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aa__aa__aa'
],
naming: {
top: false,
getLabel: function(character, row, column) {
return column;
}
},
legend: { //定义图例
node: $('#legend'),
items: [
['a', 'available', '可选座'],
['a', 'unavailable', '已售出']
]
},
click: function() { //点击事件
if (this.status() == 'available') { //可选座
$('<li>' + (this.settings.row + 1) + '排' + this.settings.label + '座</li>')
.attr('id', 'cart-item-' + this.settings.id)
.data('seatId', this.settings.id)
.appendTo($cart);
$counter.text(sc.find('selected').length + 1);
$total.text(recalculateTotal(sc)+price);
return 'selected';
} else if (this.status() == 'selected') { //已选中
//更新数量
$counter.text(sc.find('selected').length - 1);
//更新总计
$total.text(recalculateTotal(sc) - price);
//删除已预订座位
$('#cart-item-' + this.settings.id).remove();
//可选座
return 'available';
} else if (this.status() == 'unavailable') { //已售出
return 'unavailable';
} else {
return this.style();
}
}
});
//已售出的座位
sc.get(['1_2', '4_4', '4_5', '6_6', '6_7', '8_5', '8_6', '8_7', '8_8', '10_1', '10_2']).status('unavailable');
});
}
//计算总金额
function recalculateTotal(sc) {
var total = 0;
sc.find('selected').each(function () {
total += price;
});
return total;
}
</script>
