主页 / 问题 / 624406
Accepted
ilya1099
Asked:2020-02-07 13:11:30 +0000 UTC2020-02-07 13:11:30 +0000 UTC

显示和隐藏数组数据

  • 772

有一组标记在特定条件下由 JS 代码显示。第一次显示所选项目的标记，第二次再次出现所有可能的标记。但是，如果项目 1 已打开并因此打开其标记，然后切换到另一个项目，则标记之间会出现混淆，并且项目的标记 1 或 3 可能会与项目 2 一起显示（只有 3 个）。并且有必要，对于某个启用的项目，只显示其标记（即使您从包含的 1 个项目切换，它也应该关闭）。当您再次单击该项目时，一切都可能再次发生。

 var map = {};
 
function initialize() {
 
  var mapProp = {
    center: {
      lat: -25.363,
      lng: 131.044
    },
    zoom: 8,
    markers: []
  };
 
  map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
 

  var marker1 = new google.maps.Marker({
    position: {
      lat: -25.363,
      lng: 131.044
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
    map: map,
    category: 'blue',
  });
  map.markers.push(marker1);
  
  var marker2 = new google.maps.Marker({
    position: {
      lat: -25.664,
      lng: 131.044
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
    map: map,
    category: 'green',
  });
  map.markers.push(marker2);
  var marker3 = new google.maps.Marker({
    position: {
      lat: -25.365,
      lng: 131.144
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
    map: map,
    category: 'red',
  });
  map.markers.push(marker3);
  var marker4 = new google.maps.Marker({
    position: {
      lat: -25.366,
      lng: 131.244
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
    map: map,
    category: 'blue',
  });
  map.markers.push(marker4);
  var marker5 = new google.maps.Marker({
    position: {
      lat: -25.565,
      lng: 131.144
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
    map: map,
    category: 'red',
  });
  map.markers.push(marker5);
  var marker6 = new google.maps.Marker({
    position: {
      lat: -25.666,
      lng: 131.244
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
    map: map,
    category: 'green',
  });
  map.markers.push(marker6);
 
}
google.maps.event.addDomListener(window, 'load', initialize);

$(document).ready(function() {
      $('.markerBtn').bind('click', function(el) {
        var catToToggle = $(this).attr('data-category'); /* категория нажатой метка */
        var catState = $(this).attr('data-state'); /* статус нажатой метки */
        if ( catState=='on') {
          $(this).attr('data-state', 'off');
        } else {
          $(this).attr('data-state', 'on');
        }
        $.each(map.markers, function() {
          if (this['category'] == catToToggle) {
            if ( catState=='on') {
              this.setVisible(true);
            } else {
              this.setVisible(true);/*отображаю эту метку в любом случае для данного пункта*/
            }
          } else {
            this.setVisible(!this.getVisible());
          }
        });
      });
    });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>GoogleMaps</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript"
        src="http://maps.google.com/maps/api/js?sensor=false&language=en&callback=initMap"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="listGg.js" type="text/javascript"></script>
    <style type="text/css">
        html, body, #map {
            width: 800px; padding: 0; margin: 0;
            font-family: Arial;
        }

.islands#redIcon {color: red;}
#name {
text-decoration: none;
}
.active>a {
  font-weight: 600;
  text-decoration: none;
}
    </style>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px; "></div>
<div class="markerBtn" data-state="off" data-category="green">
  <a href="#" id="name" style="color: green;">1st points</a>
</div>
<div class="markerBtn" data-state="off" data-category="red">
  <a href="#" id="name" style="color: red;">2nd points</a>
</div>
<div class="markerBtn" data-state="off" data-category="blue">
  <a href="#" id="name" style="color: blue;">3rd points</a>
</div>
</body>
</html>

javascript

1 个回答

  1. Best Answer

    对于其余标签，您需要返回状态

    这是因为您没有重置您“离开”的标签的状态。那些。点了n次标签，还有一些状态还在，不知道是什么。

    解决方案是在“离开”标签时重置状态。目前尚不清楚您到底留下了哪个标签，因此我们将重置其他两个标签。或多或少是这样的：

    $('.markerBtn').not(this).attr('data-state', 'off');

    如果默认他们off

    你对这种情况感到困惑吗？

    我不明白你的条件逻辑，所以我重写了

    // если нужно показать все 
//(или off в зависимости от того что нужно первым)     
if ( catState=='on'){ 
     this.setVisible(true);//показываем независимо от цвета
}else{//если нужно показать только одного цвета
     if (this['category'] == catToToggle) {//показываем только выбранный цвет
          this.setVisible(true);
     } else {
           this.setVisible(false);
     }
}

    工作代码

    var map = {};

function initialize() {

  var mapProp = {
    center: {
      lat: -25.363,
      lng: 131.044
    },
    zoom: 8,
    markers: []
  };

  map = new google.maps.Map(document.getElementById("googleMap"), mapProp);


  var marker1 = new google.maps.Marker({
    position: {
      lat: -25.363,
      lng: 131.044
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
    map: map,
    category: 'blue',
  });
  map.markers.push(marker1);

  var marker2 = new google.maps.Marker({
    position: {
      lat: -25.664,
      lng: 131.044
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
    map: map,
    category: 'green',
  });
  map.markers.push(marker2);
  var marker3 = new google.maps.Marker({
    position: {
      lat: -25.365,
      lng: 131.144
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
    map: map,
    category: 'red',
  });
  map.markers.push(marker3);
  var marker4 = new google.maps.Marker({
    position: {
      lat: -25.366,
      lng: 131.244
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
    map: map,
    category: 'blue',
  });
  map.markers.push(marker4);
  var marker5 = new google.maps.Marker({
    position: {
      lat: -25.565,
      lng: 131.144
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
    map: map,
    category: 'red',
  });
  map.markers.push(marker5);
  var marker6 = new google.maps.Marker({
    position: {
      lat: -25.666,
      lng: 131.244
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
    map: map,
    category: 'green',
  });
  map.markers.push(marker6);

}
google.maps.event.addDomListener(window, 'load', initialize);

$(document).ready(function() {
  $('.markerBtn').bind('click', function(el) {
    var catToToggle = $(this).attr('data-category'); /* категория нажатой метка */
    var catState = $(this).attr('data-state'); /* статус нажатой метки */
    $('.markerBtn').not(this).attr('data-state', 'off');
    if (catState == 'on') {
      $(this).attr('data-state', 'off');
    } else {
      $(this).attr('data-state', 'on');
    }
    $.each(map.markers, function() {

      if (catState == 'on') {
        this.setVisible(true);
      } else {
        if (this['category'] == catToToggle) {
          this.setVisible(true);
        } else {
          this.setVisible(false);
        }
      }


    });
  });
});
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <title>GoogleMaps</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en&callback=initMap"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="listGg.js" type="text/javascript"></script>
  <style type="text/css">
    html,
    body,
    #map {
      width: 800px;
      padding: 0;
      margin: 0;
      font-family: Arial;
    }
    .islands#redIcon {
      color: red;
    }
    #name {
      text-decoration: none;
    }
    .active>a {
      font-weight: 600;
      text-decoration: none;
    }
  </style>
</head>

<body>
  <div id="googleMap" style="width:500px;height:380px; "></div>
  <div class="markerBtn" data-state="off" data-category="green">
    <a href="#" id="name" style="color: green;">1st points</a>
  </div>
  <div class="markerBtn" data-state="off" data-category="red">
    <a href="#" id="name" style="color: red;">2nd points</a>
  </div>
  <div class="markerBtn" data-state="off" data-category="blue">
    <a href="#" id="name" style="color: blue;">3rd points</a>
  </div>
</body>

</html>

    • 1

相关问题