Question

首先，我是一个javascript和svg noob，似乎无法在网上找到我的具体问题的答案，并开始做噩梦...也许我只是没有正确地描述搜索查询..无论如何......好吧，所以我设计了一个使用svg显示房间的平面图，并使用“object”标签将svg嵌入到我的html doc中。在我的网页右侧，我有一个房间的下拉列表。点击后我想要显示房间信息以及要在平面图上突出显示的房间。这是我用javascript函数完成的。 Yayness。现在出现问题：

第一个问题 - 当用户点击其他房间选项时，之前所选房间的图像仍然会突出显示。当选项更改时，如何将其恢复为先前状态？

第二个问题 - 我还希望用户能够点击平面图上的房间，并在页面右侧显示相同的信息。我基本上想要为两个不同的元素使用相同的函数。我已经尝试将脚本复制到svg代码中，但没有。是因为svg是html中的嵌入对象吗？

任何建议都会受到赞赏，包括我是否以正确的方式处理这一切......

<html>
<object id="cres2svg" data="crescent2map.svg" type="image/svg+xml" style="float: left;"></object>

<select name="boardroomList" style="font-size: 12px;">
<option onclick="teamworkDetail()">Teamwork</option>
<option onclick="visionDetail()">Vision</option>
</select>

<h3 id="headerDetails" style="margin-left: 680px; text-align: left; color: rgb(0, 0, 153); font-    family: arial; font-size: 14px;">Header
details go here</h3>
<p id="paraDetails" style="margin-left: 680px; text-align: left; color: rgb(0, 0, 153); font-family: arial; font-size: 12px;">Paragraph details to go here</p>
</html>

<script>
function visionDetail()
{
var cres2 = document.getElementById("cres2svg");
var svgDoc = cres2.contentDocument;
var visionRoom = svgDoc.getElementById("visionRoom");
visionRoom.getAttributeNode("style").value="fill:green;stroke:red;opacity:1";
document.getElementById("headerDetails").innerHTML= "Vision Room";
document.getElementById("paraDetails").innerHTML="The Vision Room is located..."}


function teamworkDetail()
{
var cres2 = document.getElementById("cres2svg");
var svgDoc = cres2.contentDocument;
var teamworkRoom = svgDoc.getElementById("teamworkRoom");
teamworkRoom.getAttributeNode("style").value="fill:green;stroke:red;opacity:1";
document.getElementById("headerDetails").innerHTML= "Teamwork Room";
document.getElementById("paraDetails").innerHTML="The Teamwork Room is located...";
}
</script>

Answer 1

这不是解决问题的最佳方式，因为您必须为每个房间重复相同的代码。一个首选方法是创建一个接受房间名称的函数，然后执行与两个单独函数相同的操作：

function showRoomDetail(roomId)
{
  var cres2 = document.getElementById("cres2svg");
  var svgDoc = cres2.contentDocument;
  var roomRef = svgDoc.getElementById(roomId);
      //....etc  Although you'd also have to maybehold the details of each room in an array of objects
}

如果您不希望采用上述概念，而是按照您的方式保留它。您遇到的问题是您需要手动重置其他房间的样式以拨打特定房间的电话：

function visionDetail()
{
  var cres2 = document.getElementById("cres2svg");
  var svgDoc = cres2.contentDocument;
  var visionRoom = svgDoc.getElementById("visionRoom");
  visionRoom.getAttributeNode("style").value="fill:green;stroke:red;opacity:1";
  svgDoc.getElementById("teamworkRoom").getAttributeNode("style").value="";  // sets the style to empty
  svgDoc.getElementById("anotherRoomId").getAttributeNode("style").value="";  // sets the style to empty
  document.getElementById("headerDetails").innerHTML= "Vision Room";
  document.getElementById("paraDetails").innerHTML="The Vision Room is located..."
}

如何在HTML中显示嵌入HTML的SVG onclick事件？

1 个答案: