Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Сократить код. (https://javascript.ru/forum/misc/65828-sokratit-kod.html)

Marius90 09.11.2016 21:37

Сократить код.
 
Приветствую! При помощи библиотеки "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');
            }
        });
    });

рони 09.11.2016 21:59

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

Ostic 09.11.2016 22:14

$(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)...
   };
});

как-то так имхо

Marius90 09.11.2016 22:25

Вложений: 1
Полный скрипт в архиве. Спс за предложенные методы решения, буду пробовать.

рони 09.11.2016 23:08

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 09.11.2016 23:13

рони, называй, пожалуйста, переменные говорящими именами. До одной буквы их прекрасно сократит минификатор.)

Marius90 09.11.2016 23:15

Цитата:

Сообщение от рони (Сообщение 434601)
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")
        })
    })
});

спс большое, все работает)

рони 09.11.2016 23:22

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 09.11.2016 23:24

рони, дык это не для меня же, а для тех кому отвечаешь.)

рони 09.11.2016 23:25

Aetae,
ок.


Часовой пояс GMT +3, время: 13:14.