javascript - 如何简化 jQuery 代码以突出显示区域和链接

Question

我想关联突出显示的区域和链接:square1-linkone； square2-linktwo; square3-linkthird； ...

下面的代码可以工作，但是比较麻烦并且容易出错；有什么方法可以简化许多区域和链接吗？

jQuery

$(function() {

  $('.map').maphilight();

  $('#linkone').mouseover(function() {
    $('#square1').mouseover();
  }).mouseout(function() {
    $('#square1').mouseout();
  });

  $("#square1").on({
    mouseover:function(){
      $("#linkone").css("color","red");},
    mouseout:function() {
      $('#linkone').css("color","green");
    }
  });

  $('#linktwo').mouseover(function() {
    $('#square2').mouseover();
  }).mouseout(function() {
    $('#square2').mouseout(); 
  });

  $("#square2").on({
    mouseover:function(){
      $("#linktwo").css("color","red");},
    mouseout:function() {
      $('#linktwo').css("color","green");
    }
  });

  $('#linkthree').mouseover(function() {
    $('#square3').mouseover();
  }).mouseout(function() {
    $('#square3').mouseout(); 
  });

  $("#square3").on({
    mouseover:function(){
      $("#linkthree").css("color","red");},
    mouseout:function() {
      $('#linkthree').css("color","green");
    }
  });

  $('#linkfour').mouseover(function() {
    $('#square4').mouseover();
  }).mouseout(function() {
    $('#square4').mouseout(); 
  });

  $("#square4").on({
    mouseover:function(){
      $("#linkfour").css("color","red");},
    mouseout:function() {
      $('#linkfour').css("color","green");
    }
  });

});

Answer 1

您可以使用 jQuery 查找 Id 包含指定字符串的所有元素

$("[id*='link']")

或者您可以给所有想要在类上执行相同操作的元素，然后按类查找元素

$(".colorgreen").css("color,"green")

在文档 api.jquery.com/category/selectors 中了解有关选择器的更多信息