Question

我们为我的网站上发布的地图部分制作了jquery函数，但是它太大了可以使用var和其他东西函数制作这个代码很小我们为我的网站上的地图部分制作jquery函数但是它太大了，任何人都可以使用var和其他函数使这个代码变小： -

请检查代码： -

$(document).ready(function(){
$("#foot-map #uktabfoot").click(function(){
    $('#foot-map').find('.map-address').find('.uk-address').show();
    $('#foot-map').find('.map-address').find('.malta-address').hide();
    $('#foot-map').find('.map-address').find('.india-address').hide();

    // map section tab
    $('#foot-map').find('.maplink').find('#uktabfoot').addClass('active');
    $('#foot-map').find('.maplink').find('#maltatabfoot').removeClass('active');
    $('#foot-map').find('.maplink').find('#indiatabfoot').removeClass('active');

    // map section icon
    $('#foot-map').find('.map-area').find('.uk').addClass('map-hover');
    $('#foot-map').find('.map-area').find('.malta').removeClass('map-hover');
    $('#foot-map').find('.map-area').find('.india').removeClass('map-hover');

    // map section flag
    $('#foot-map').find('.map-area').find('.uk').find('.flag').css('display','block');
    $('#foot-map').find('.map-area').find('.malta').find('.flag').css('display','none');
    $('#foot-map').find('.map-area').find('.india').find('.flag').css('display','none');        
});
$("#foot-map #maltatabfoot").click(function(){
    $('#foot-map').find('.map-address').find('.uk-address').hide();
    $('#foot-map').find('.map-address').find('.malta-address').show();      
    $('#foot-map').find('.map-address').find('.india-address').hide();

    // map section tab
    $('#foot-map').find('.maplink').find('#uktabfoot').removeClass('active');
    $('#foot-map').find('.maplink').find('#maltatabfoot').addClass('active');
    $('#foot-map').find('.maplink').find('#indiatabfoot').removeClass('active');

    // map section
    $('#foot-map').find('.map-area').find('.uk').removeClass('map-hover')
    $('#foot-map').find('.map-area').find('.malta').addClass('map-hover');
    $('#foot-map').find('.map-area').find('.india').removeClass('map-hover');

    // map section flag
    $('#foot-map').find('.map-area').find('.uk').find('.flag').css('display','none');
    $('#foot-map').find('.map-area').find('.malta').find('.flag').css('display','block');
    $('#foot-map').find('.map-area').find('.india').find('.flag').css('display','none');        
});
$("#foot-map #indiatabfoot").click(function(){
    $('#foot-map').find('.map-address').find('.uk-address').hide();
    $('#foot-map').find('.map-address').find('.malta-address').hide();
    $('#foot-map').find('.map-address').find('.india-address').show();

    // map section tab
    $('#foot-map').find('.maplink').find('#uktabfoot').removeClass('active');
    $('#foot-map').find('.maplink').find('#maltatabfoot').removeClass('active');
    $('#foot-map').find('.maplink').find('#indiatabfoot').addClass('active');

    // map section
    $('#foot-map').find('.map-area').find('.uk').removeClass('map-hover')
    $('#foot-map').find('.map-area').find('.malta').removeClass('map-hover');
    $('#foot-map').find('.map-area').find('.india').addClass('map-hover');

    // map section flag
    $('#foot-map').find('.map-area').find('.uk').find('.flag').css('display','none');
    $('#foot-map').find('.map-area').find('.malta').find('.flag').css('display','none');
    $('#foot-map').find('.map-area').find('.india').find('.flag').css('display','block');           
});
});

Answer 1

希望它有所帮助!!!

function getMapSection(findClass) {
    return $('#foot-map').find(findClass);
}

$(document).ready(function () {
    var _address = getMapSection('.map-address');
    var _mapLink = getMapSection('.maplink');
    var _mapArea = getMapSection('.map-area');

    $("#foot-map #uktabfoot").click(function () {
        $(_address).find('.uk-address').show();
        $(_address).find('.malta-address').hide();
        $(_address).find('.india-address').hide();

        // map section tab
        $(_mapLink).find('#uktabfoot').addClass('active');
        $(_mapLink).find('#maltatabfoot').removeClass('active');
        $(_mapLink).find('#indiatabfoot').removeClass('active');

        // map section icon
        $(_mapArea).find('.uk').addClass('map-hover');
        $(_mapArea).find('.malta').removeClass('map-hover');
        $(_mapArea).find('.india').removeClass('map-hover');

        // map section flag
        $(_mapArea).find('.uk').find('.flag').css('display', 'block');
        $(_mapArea).find('.malta').find('.flag').css('display', 'none');
        $(_mapArea).find('.india').find('.flag').css('display', 'none');
    });
    $("#foot-map #maltatabfoot").click(function () {
        $(_address).find('.uk-address').hide();
        $(_address).find('.malta-address').show();
        $(_address).find('.india-address').hide();

        // map section tab
        $(_mapLink).find('#uktabfoot').removeClass('active');
        $(_mapLink).find('#maltatabfoot').addClass('active');
        $(_mapLink).find('#indiatabfoot').removeClass('active');

        // map section
        $(_mapArea).find('.uk').removeClass('map-hover')
        $(_mapArea).find('.malta').addClass('map-hover');
        $(_mapArea).find('.india').removeClass('map-hover');

        // map section flag
        $(_mapArea).find('.uk').find('.flag').css('display', 'none');
        $(_mapArea).find('.malta').find('.flag').css('display', 'block');
        $(_mapArea).find('.india').find('.flag').css('display', 'none');
    });
    $("#foot-map #indiatabfoot").click(function () {
        $(_address).find('.uk-address').hide();
        $(_address).find('.malta-address').hide();
        $(_address).find('.india-address').show();

        // map section tab
        $(_mapLink).find('#uktabfoot').removeClass('active');
        $(_mapLink).find('#maltatabfoot').removeClass('active');
        $(_mapLink).find('#indiatabfoot').addClass('active');

        // map section
        $(_mapArea).find('.uk').removeClass('map-hover')
        $(_mapArea).find('.malta').removeClass('map-hover');
        $(_mapArea).find('.india').addClass('map-hover');

        // map section flag
        $(_mapArea).find('.uk').find('.flag').css('display', 'none');
        $(_mapArea).find('.malta').find('.flag').css('display', 'none');
        $(_mapArea).find('.india').find('.flag').css('display', 'block');
    });
});

Answer 2

您可以尝试使代码更具可重用性：

指针：

保持接近一致。您正在执行hide/show，add/remove课程和display none/block。而是使用一种通用的方法进行课堂学习。
要操纵课程，您可以使用$.toggleClass。这期望第二个参数为布尔值。 true将添加，false将删除。
现在编写一个满足所有情况条件的函数。

示例：

// Have a generic handler for all elements
$("#uktabfoot, #maltatabfoot, #indiatabfoot").click(function() {

  // Keep a copy of prefixes for all elements
  const idPrefix = ['uk', 'matla', 'india'];

  // this variable will be used to relate to current element
  var initial = "";
  var id = $(this).attr('id');

  for (var i = 0; i < idPrefix.length; i++) {
    if (id.indexOf(idPrefix[i]) > -1) {
      // initialise based on ID of currrent element
      initial = idPrefix[i];
      break;
    }
  }

  // this will hold all validation code for relation
  function isRelatedToCurrent(selectorType, el, value) {
    switch (selectorType) {
      case "class": return $(el).hasClass(value)
      case "id": return $(el).attr(id) === value;
    }
  }

  $('#foot-map')
    .find('.map-address [class$="-address"]')
    .toggleClass("hide", !isRelatedToCurrent("class", this, initial + "-address"));

  // map section tab
  $('#foot-map')
    .find('.maplink [id$=tabfoot]')
    .toggleClass('active', isRelatedToCurrent('id', this, initial + 'tabfoot'));

  // map section icon
  var _classList = idPrefix.map(x => "." + x).join(" ");
  $('#foot-map')
    .find('.map-area ' + _classList)
    .toggleClass('map-hover', isRelatedToCurrent("class", this, initial))
    .toggleClass('hide', !isRelatedToCurrent("class", this, initial))
});

jquery函数很大

2 个答案:

示例：