Question

我为我的网站编写了一些jQuery代码。不幸的是，我使用的代码比它需要的时间长，可以缩短。我已经尝试了许多不同的方法来缩短我的代码，但问题是我对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属性的形状，在这种情况下，他修改了不同的值。

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

如您所见，此代码非常不专业。有人可以用更专业的代码帮助我，并且我的意思是更短，所以我得到相同的结果？我花了两个小时尝试各种组合，我无法得到任何工作。

Answer 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');
}

然后调用该函数，将所有变量数据作为参数传递：

$("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, 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');
  });
}

调用这个函数：

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' )

您可以通过假设某个区域始终需要鼠标悬停和鼠标移除事件来进一步缩短它：

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' )

虽然我认为最后一个推动它有点太过分了。

Answer 2

检查以下代码：

<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');
  });  
});

快速检查，没有运行，但据我所知，它是最短的。

Answer 3

我没有为$("area['']")和$("area:not['']")调用mouseout和mouseover事件，而是调用了$("area")并在内部添加了一个检查内容，查找您要查找的数据。我创建了var 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');
    });
});

使用data（）

3 个答案: