Question

我有一个使用Google Maps Api的网站，可以添加和保存标记。单击保存的标记时，它会显示一个信息窗口，其中包含一个Button。单击此按钮时，我希望它显示隐藏的DIV元素，其中包含已保存标记详细信息的表。

包含InfoWindow的JS是：

var eventContent = $('<div class="event-info">' + '<h4 class="event-name">' + point.name + '</h4><hr>' +
        '<span><h5>Date: </h5>' +
        '<p class="event-date">' + point.edate + '</p></span>' +
        '<p class="event-description">'+ point.description +'</p>' + 
        '<button id="remove-event" name="remove-event" onclick="showDetails();" class="remove-event btn btn-danger btn-sm" title="View Event">View Event</button>'+
        '</div>');

    // Display Event details on marker click
    google.maps.event.addListener(event_markers[i], "click", function () {
        infowindow.setContent(eventContent[0]);
        infowindow.open(map, event_markers[i]);
        map.setCenter(marker.getPosition());
        map.setZoom(10);
    });

我要显示的HTML DIV是：

<div class="event-details" id="event-details" style="display: none ">
        <h3>Event Details</h3>
        <table class="table"> 
            <tr>
                <th>Event Name: </th>
                <td> Bill Gates</td>
             </tr>
             <tr>
                <th>Event Date: </th>
                <td> Bill Gates</td>
             </tr>
        </table>
        <button type="button" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove"></span> Remove Event</button>
    </div>

我尝试了这个，除了其他类似的想法，但没有运气。：

function showDetails()
{
   if (document.getElementById("event-details").style.display == "none" ) {
       document.getElementById("event-details").style.display="";

   } else {
       document.getElementById("event-details").style.display="none";
}

Answer 1

您的元素没有id“事件详细信息”，而是class。请尝试使用getElementsByClassName：

document.getElementsByClassName("event-details")[0].style.display = "none"// returns multiple elements so you should select the first (0th) item.

也许更好的解决方案是在你的html元素中添加一个“id”：

<div id="event-details" class="event-details" style="display: none ">

这样，您的getElementById方法应该捕获您想要的元素。

Answer 2

你试过给div一个ID吗？

也许为什么“getElementById”无效。

然后：

的document.getElementById（ “eventDetails”）的style.display = “无”;

Answer 3

固定。我的showDetails函数有一个语法错误，缺少一个结束}

function showDetails()
{
   if (document.getElementById("event-details").style.display == "none" ) {
       document.getElementById("event-details").style.display="block";

   }
   else
   {
      document.getElementById("event-details").style.display="none";
    }
}

Answer 4

请使用querySelector，如下所示。由于您已经拥有了要点击的元素的ID，如下所示：

<button id="remove-event" name="remove-event" class="remove-event btn btn-danger btn-sm" title="View Event">View Event</button>

您可以删除onclick内联事件处理程序，并按以下方式执行。

document.querySelector("#remove-event").addEventListener("click", function() {
    var elem = document.querySelector("#event-details");
    if (elem.style.display == "none") {
        elem.style.display = "block";
    } else {
        elem.style.display = "none";
    }
});

Answer 5

可以尝试这些 -

1）将div id更改为other而不是具有类名

2）在这里你要检查'none'，但我想如果你在调用这段代码之前没有在你的代码中的任何地方显示div，你可以删除if子句，因为那个div已经隐藏了，if子句不会如果它已经隐藏了就行了。

if (document.getElementById("event-details").style.display == "none" ) {
       document.getElementById("event-details").style.display="";
   }

3）尝试使用 - 而不是

 document.getElementById("event-details").style.display="";

到

document.getElementById("event-details").style.display=block;

或

document.getElementById("event-details").show();

单击javascript按钮显示/隐藏Div元素

5 个答案: