jquery隐藏和显示div不起作用

Question

我想隐藏并显示我工作项目的div表...我没有错误和警告，但它不起作用...我检查了我的代码，但我无法找到我所做的错误。 .no控制台中没有错误也没有警告..

<script>
  function initMap() {
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,
      center: {
        lat: 41.85,
        lng: -87.65
      }
    });
    directionsDisplay.setMap(map);

    document.getElementById('submit').addEventListener('click', function() {
      calculateAndDisplayRoute(directionsService, directionsDisplay);
    });
  }

  function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    var waypts = [];
    /* Red Cow Moran Hotel, Dublin, Ireland
      Place ID ChIJX6NlcPMMZ0gRoG0Han_CNGE
      Naas Rd, Fox-And-Geese, Dublin 22, Ireland
      */
    waypts.push({
      location: {
        placeId: "ChIJX6NlcPMMZ0gRoG0Han_CNGE"
      },
      stopover: true
    });

    directionsService.route({
      /* Braudstone Motors Ltd
         Place ID ChIJCVY5DJkMZ0gRy_6zPWZZNkA
         39 Ballymount Rd Lower, Wilkinstown, Dublin 12, Ireland
      */
      origin: {
        placeId: "ChIJCVY5DJkMZ0gRy_6zPWZZNkA"
      },
      /* Campion Insurances Ltd, Dublin, Ireland
      Place ID ChIJIbEe7roMZ0gRspMhJ1yiado
      Second Floor, Otter House,, Naas Road, Fox-And-Geese, Dublin, Ireland
      */
      destination: {
        placeId: "ChIJIbEe7roMZ0gRspMhJ1yiado"
      },
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: 'DRIVING'
    }, function(response, status) {
      if (status === 'OK') {
        debugger;
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
<input id="start" value="Braudstone Motors Ltd,Dublin,Ireland" size="50" />
<br>
<input id="waypt" value="Red Cow Moran Hotel, Dublin, Ireland" size="50" />
<br>
<input id="end" value="Campion Insurances Ltd, Dublin, Ireland" size="50" />
<br>
<input id="submit" value="submit" type="button" />
<div id="map"></div>

Answer 1

请尝试以下方法。我认为按钮会触发所需的行为，但也会触发表单提交。因此，您需要阻止默认按钮行为显示您的javascript操作。

$(document).ready(function(){
    $(".hidecomment").click(function(event){
        event.preventDefault();
        $(".commentarea").hide("slow");
    });
    $(".showcomment").click(function(event){
        event.preventDefault();
        $(".commentarea").show(2000);
    });
});

Answer 2

代码是正确的，它没有用，因为你还没有包含jquery脚本。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

编辑：

＆＃13;

＆＃13;

$(document).ready(function(){
    $(".hidecomment").click(function(){
        $(".commentarea").hide("slow");
    });
    $(".showcomment").click(function(){
        $(".commentarea").show(2000);
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="usercomment" align="center">
      <tr><td><button class="hidecomment">HIDE COMMENT</button></td>
          <td><button class="showcomment">SHOW COMMENT</button></td>
      </tr>
  </table>

<div class="commentarea">
      See? By including the script this works.
  </div>

＆＃13;

＆＃13;

＆＃13;