내 사이트에 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 시간을 보냈고 나는 일할 것이 아무것도 없었다.