Сократить код.
Приветствую! При помощи библиотеки "jQuery maphilight" написал скрипт, который при клике на определенный чекбокс подсвечивает область на схеме и выделяет определенным стилем строку в таблице с описанием данной области. Код получился однотипный, но я не пойму как его сократить. Буду рад любой помощи.
$(function() {
$('.map').maphilight({
fillColor: '008800'
});
$("#check1").click(function(e) {
var row = $(this).parent().parent();
var id = row.attr("id");
var data = $("#lot").mouseout().data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
if (this.checked) {
row.addClass("selected");
$("#lot").data('maphilight', data).trigger('alwaysOn.maphilight');
} else {
row.removeClass("selected");
$("#lot").data('maphilight', data).trigger('alwaysOn.maphilight');
}
});
$("#check2").click(function(e) {
var row = $(this).parent().parent();
var id = row.attr("id");
var data = $("#lot1").mouseout().data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
if (this.checked) {
row.addClass("selected");
$("#lot1").data('maphilight', data).trigger('alwaysOn.maphilight');
} else {
row.removeClass("selected");
$("#lot1").data('maphilight', data).trigger('alwaysOn.maphilight');
}
});
$("#check3").click(function(e) {
var row = $(this).parent().parent();
var id = row.attr("id");
var data = $("#lot2").mouseout().data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
if (this.checked) {
row.addClass("selected");
$("#lot2").data('maphilight', data).trigger('alwaysOn.maphilight');
} else {
row.removeClass("selected");
$("#lot2").data('maphilight', data).trigger('alwaysOn.maphilight');
}
});
$("#check4").click(function(e) {
var row = $(this).parent().parent();
var id = row.attr("id");
var data = $("#lot3").mouseout().data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
if (this.checked) {
row.addClass("selected");
$("#lot3").data('maphilight', data).trigger('alwaysOn.maphilight');
} else {
row.removeClass("selected");
$("#lot3").data('maphilight', data).trigger('alwaysOn.maphilight');
}
});
});
|
Marius90,
макет бы минимальный, а так можно тригер из условия вынести, перед или после условия поставить, значения не имеет. |
$(function() {
$('.map').maphilight({
fillColor: '008800'
});
var list = {"#lot":"#check1","#lot1":"check2",...};
for(var key in list){
$(list.key).click(function(e) {
...
$(key).data('maphilight', data)...
};
});
как-то так имхо |
Вложений: 1
Полный скрипт в архиве. Спс за предложенные методы решения, буду пробовать.
|
Marius90,
$(function() {
$(".map").maphilight({
fillColor: "008800"
});
var d = $("map area");
$("#areas tbody tr").each(function(e, b) {
var c = d.eq(e),
a = c.data("maphilight") || {};
$('input[type="checkbox"]', b).on("click", function() {
a.alwaysOn = !a.alwaysOn;
$(b).toggleClass("selected", a.alwaysOn);
c.data("maphilight", a).trigger("alwaysOn.maphilight")
})
})
});
|
рони, называй, пожалуйста, переменные говорящими именами. До одной буквы их прекрасно сократит минификатор.)
|
Цитата:
|
Aetae,
$(function() {
$(".map").maphilight({
fillColor: "008800"
});
var areas = $("map area");
$("#areas tbody tr").each(function(indx, tr) {
var area = areas.eq(indx),
data = area.data("maphilight") || {};
$('input[type="checkbox"]', tr).on("click", function() {
data.alwaysOn = !data.alwaysOn;
$(tr).toggleClass("selected", data.alwaysOn);
area.data("maphilight", data).trigger("alwaysOn.maphilight")
})
})
});
|
рони, дык это не для меня же, а для тех кому отвечаешь.)
|
Aetae,
ок. |
| Часовой пояс GMT +3, время: 17:30. |