2016-06-10 1 views
-1

내 사이트에 jQuery 코드를 작성했습니다. 불행히도, 내가 사용하는 코드는 필요 이상으로 길어지고 단축 될 수 있습니다. 내 코드를 단축하는 데 여러 가지 방법을 시도했지만 문제는 jQuery에 대한 지식이 매우 약하다는 점입니다.data()로 jquery 함수 단축 코드

이 질문은 예상되는 결과를 얻는 것이 아니라 더 많은 지식을 얻기위한 쉬운 방법은 아닙니다.

그래서 내 HTML 코드.

<map name="Map" id="Map"> 
    <area class="18482" data-maphilight={"fillColor":"B97F5D"} shape="rect" coords=540,4,598,129" href="#"/> 
    <area class="18521" data-maphilight={"fillColor":"AAAAAA"} shape="rect" coords=486,4,540,130" href="#"/> 
    <area class="18552" shape="rect" coords=433,4,487,130" href="#"/> 
</map> 

우리는 data-maphilight 속성에 의해 정의 된 자신의 배경과 여기에 세 가지 다른 모양을 얻었다. 이제 아래 코드를 사용하여 배경이 다른 각 도형에 대해 몇 가지 기능을 설정했습니다. 또한 하나의 함수는 data-maphilight 속성이없는 shape를 지원하며,이 경우 다른 값을 수정합니다.

$(function() { 
    $("area[data-maphilight*='B97F5D']").mouseover(function(e) { 
    var data = {}; 
    data.alwaysOn = true; 
    data.fillColor = 'B97F5D'; 
    data.fillOpacity = '0.7'; 
    $(this).data('maphilight', data).trigger('alwaysOn.maphilight'); 
    }).mouseout(function(e) { 
    var data = {}; 
    data.alwaysOn = true; 
    data.fillColor = 'B97F5D'; 
    data.fillOpacity = '1'; 
    $(this).data('maphilight', data).trigger('alwaysOn.maphilight'); 
    }); 
    $("area[data-maphilight*='AAAAAA']").mouseover(function(e) { 
    var data = {}; 
    data.alwaysOn = true; 
    data.fillColor = 'AAAAAA'; 
    data.fillOpacity = '0.7'; 
    $(this).data('maphilight', data).trigger('alwaysOn.maphilight'); 
    }).mouseout(function(e) { 
    var data = {}; 
    data.alwaysOn = true; 
    data.fillColor = 'AAAAAA'; 
    data.fillOpacity = '1'; 
    $(this).data('maphilight', data).trigger('alwaysOn.maphilight'); 
    }); 
    $("area:not([data-maphilight])").mouseover(function(e) { 
    var data = {}; 
    data.alwaysOn = true; 
    data.fillColor = '444444'; 
    data.fillOpacity = '1'; 
    $(this).data('maphilight', data).trigger('alwaysOn.maphilight'); 
    }).mouseout(function(e) { 
    var data = {}; 
    data.alwaysOn = true; 
    data.fillColor = '000000'; 
    data.fillOpacity = '1'; 
    $(this).data('maphilight', data).trigger('alwaysOn.maphilight'); 
    }); 
}); 

이 코드는 전문가가 아닙니다. 누군가 좀 더 전문적인 코드의 예를 통해 나를 도울 수 있습니까? 그리고 그 말은 훨씬 더 짧아서 동일한 결과를 얻을 수 있습니까? 나는 여러 가지 조합을 시도하는 데 2 ​​시간을 보냈고 나는 일할 것이 아무것도 없었다.

답변

1

넌 기능으로 모든 반복 코드를 묶어을 단축 할 수 :

$("area[data-maphilight*='B97F5D']").mouseover(function(e) { 
    maphilightTrigger($(this), true, 'B97F5D', '0.7') 
}).mouseout(function(e) { 
    maphilightTrigger($(this), true, 'B97F5D', '1') 
}); 

$("area[data-maphilight*='AAAAAA']").mouseover(function(e) { 
    maphilightTrigger($(this), true, 'AAAAAA', '0.7') 
}).mouseout(function(e) { 
    maphilightTrigger($(this), true, 'AAAAAA', '1') 
}); 

$("area:not([data-maphilight])").mouseover(function(e) { 
    maphilightTrigger($(this), true, '444444', '1') 
}).mouseout(function(e) { 
    maphilightTrigger($(this), true, '000000', '1') 
}); 

이 더 단축 할 수있다 : 매개 변수로 모든 다양한 데이터를 전달

function maphilightTrigger($area, alwaysOn, fillColor, fillOpacity) { 
    var data = {}; 
    data.alwaysOn = alwaysOn; 
    data.fillColor = fillColor; 
    data.fillOpacity = fillOpacity; 
    $area.data('maphilight', data).trigger('alwaysOn.maphilight'); 
} 

그 다음 함수를 호출 선택기 및 이벤트에 번들로 묶어서 :

function maphilightTrigger($area, event, alwaysOn, fillColor, fillOpacity) { 
    var data = {}; 
    data.alwaysOn = alwaysOn; 
    data.fillColor = fillColor; 
    data.fillOpacity = fillOpacity; 

    $area.on(event, function(e) { 
    $area.data('maphilight', data).trigger('alwaysOn.maphilight'); 
    }); 
} 

func 이 같은 기 :

function maphilightTrigger($area, alwaysOnMouseOver, fillColorMouseOver, fillOpacityMouseOver, alwaysOnMouseOut, fillColorMouseOut, fillOpacityMouseOut) { 
    var dataMouseOver = {}; 
    dataMouseOver.alwaysOn = alwaysOnMouseOver; 
    dataMouseOver.fillColor = fillColorMouseOver; 
    dataMouseOver.fillOpacity = fillOpacityMouseOver; 

    var dataMouseOver = {}; 
    dataMouseOver.alwaysOn = alwaysOnMouseOut; 
    dataMouseOver.fillColor = fillColorMouseOut; 
    dataMouseOver.fillOpacity = fillOpacityMouseOut; 

    $area.mouseover(function(e) { 
    $area.data('maphilight', dataMouseOver).trigger('alwaysOn.maphilight'); 
    }).mouseout(function(e) { 
    $area.data('maphilight', dataMouseOver).trigger('alwaysOn.maphilight'); 
    }); 
} 

그리고이 같은 함수 호출 :

maphilightTrigger($("area[data-maphilight*='B97F5D']"), true, 'B97F5D', '0.7', true, 'B97F5D', '1') 
maphilightTrigger($("area[data-maphilight*='AAAAAA']"), true, 'AAAAAA', '0.7', true, 'AAAAAA', '1') 
maphilightTrigger($("area:not([data-maphilight]"), true, '444444', '1', true, '000000', '1') 

maphilightTrigger($("area[data-maphilight*='B97F5D']"), mouseover, true, 'B97F5D', '0.7') 
maphilightTrigger($("area[data-maphilight*='B97F5D']"), mouseout, true, 'B97F5D', '1') 

maphilightTrigger($("area[data-maphilight*='AAAAAA']"), mouseover, true, 'AAAAAA', '0.7') 
maphilightTrigger($("area[data-maphilight*='AAAAAA']"), mouseout, true, 'AAAAAA', '1') 

maphilightTrigger($("area:not([data-maphilight]"), mouseover, true, '444444', '1') 
maphilightTrigger($("area:not([data-maphilight]"), mouseout, true, '000000', '1') 

당신은 항상 마우스 오버와로 마우스 이벤트를 필요로 영역을 가정하여 더욱를 줄일 수있다 내가 마지막으로 생각한 것은 조금 지나치다.

0

확인 아래 코드 :

<map name="Map" id="Map"> 
    <area class="18482" data-maphilight={"fillColor":"B97F5D"} shape="rect" coords=540,4,598,129" href="#"/> 
    <area class="18521" data-maphilight={"fillColor":"AAAAAA"} shape="rect" coords=486,4,540,130" href="#"/> 
    <area class="18552" data-maphilight shape="rect" coords=433,4,487,130" href="#"/> 
</map> 

하고 스크립트가

$(function() { 
    $("area[data-maphilight]").mouseover(function(e) { 
    var fillColor = $(this).data("maphilight").fillColor; 
    var data = {}; 
    data.alwaysOn = true; 
    data.fillColor = fillColor!=undefined ?fillColor:'444444' 
    data.fillOpacity = '0.7'; 
    $(this).data('maphilight', data).trigger('alwaysOn.maphilight'); 
    }).mouseout(function(e) { 
    var fillColor = $(this).data("maphilight").fillColor; 
    var data = {}; 
    data.alwaysOn = true; 
    data.fillColor = fillColor!=undefined ?fillColor:'000000' 
    data.fillOpacity = '1'; 
    $(this).data('maphilight', data).trigger('alwaysOn.maphilight'); 
    }); 
}); 

는 그냥 실행하지 않은, 빨리 확인 지금하지만 내가 아는 한 가장 짧은입니다.

0

대신 $("area['']")$("area:not['']")의로 마우스 및 마우스 오버 이벤트를 호출, 난 그냥 $("area")에 전화해서 당신이 찾고있는 데이터에 대한 내부 검사를 추가했습니다. 나는 maphilightData이라는 변수를 만들고 현재 선택된 객체에 정의되어 있는지 확인했다.

$(function() { 
    $("area").mouseover(function (e) { 
     var maphilightData = $(this).data("maphilight"); 
     var data = {}; 
     data.alwaysOn = true; 
     data.fillColor = (maphilightData != undefined? maphilightData.fillColor : "444444"); 
     data.fillOpacity = (maphilightData != undefined ? "0.7" : "1"); 
     $(this).data('maphilight', data).trigger('alwaysOn.maphilight'); 
    }).mouseout(function (e) { 
     var maphilightData = $(this).data("maphilight"); 
     var data = {}; 
     data.alwaysOn = true; 
     data.fillColor = (maphilightData != undefined ? maphilightData.fillColor : "000000"); 
     data.fillOpacity = "1"; 
     $(this).data('maphilight', data).trigger('alwaysOn.maphilight'); 
    }); 
}); 

또는 당신은이처럼 연결할 수 있습니다 :

$(function() { 
    $("area").mouseover(function (e) { 
    debugger; 
     var maphilightData = $(this).data("maphilight"); 
     var data = { alwaysOn: true, fillColor: (maphilightData != undefined ? maphilightData.fillColor : "444444"), fillOpacity : (maphilightData != undefined ? "0.7" : "1") }; 
    $(this).data('maphilight', data).trigger('alwaysOn.maphilight'); 
    }).mouseout(function (e) { 
     var maphilightData = $(this).data("maphilight"); 
     var data = { alwaysOn: true, fillColor: (maphilightData != undefined ? maphilightData.fillColor : "000000"), fillOpacity : "1" }; 
     $(this).data('maphilight', data).trigger('alwaysOn.maphilight'); 
    }); 
});