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

Show/Hide Div element with javascript button click

本文关键字：隐藏 Div 元素 显示 javascript 按钮 单击      更新时间：2023-09-26

我有一个使用谷歌地图Api的网站，它可以添加和保存标记。当点击一个保存的标记时，它会显示一个信息窗口，其中有一个按钮。当点击这个按钮时，我希望它显示一个隐藏的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";
}

您的元素没有"event-details"的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方法应该可以捕获所需的元素。

您有没有尝试给div一个ID？

也许是"getElementById"不起作用的原因。

然后：

document.getElementById（"eventDetails"）.style.display="none"；

固定。我的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";
    }
}

请按如下方式使用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";
    }
});

可以试试这些-

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();
相关文章：