Javascript HTML按钮未显示_Javascript_Jquery_Html_Svg_Button

Javascript HTML按钮未显示

javascript jquery html svg button

Javascript HTML按钮未显示,javascript,jquery,html,svg,button,Javascript,Jquery,Html,Svg,Button,我正在尝试创建一个程序，该程序生成一个笑脸和三个按钮，一个将脸变黄，另两个将眼睛变黑。以下是我目前掌握的代码： JS文件 var fill1 = "#ffff00"; var fill2 = "#000000"; $svg = $("#smiley"); var color = function () { $("#ChangeFace").click(function(){ $("#face", $svg).attr('style', "fill:"+fill1) }); $(

我正在尝试创建一个程序，该程序生成一个笑脸和三个按钮，一个将脸变黄，另两个将眼睛变黑。以下是我目前掌握的代码：

JS文件

var fill1 = "#ffff00";
var fill2 = "#000000";
$svg = $("#smiley");
var color = function () { 
    $("#ChangeFace").click(function(){ $("#face", $svg).attr('style', "fill:"+fill1) });
    $("#ChangeLEye").click(function(){ $("#Leye", $svg).attr('style', "fill:"+fill2) });
    $("#ChangeREye").click(function(){ $("#Reye", $svg).attr('style', "fill:"+fill2) });
};`

SVG文件

<svg id="smiley" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <circle id="face" cx="100" cy="100" r="70" style="stroke: yellow; stroke-width: 4; fill: none"/>
  <circle id="Leye" cx="75" cy="75" r="10" style="stroke: black; stroke-width: 1; fill: none"/>
  <circle id="Reye" cx="125" cy="75" r="10" style="stroke: black; stroke-width: 1; fill: none"/>
  <path  id= "mouth" d="M75,120 Q100,145 125,120" style="stroke: black; stroke-width: 6; fill: none"/> 
</svg>`

HTML


$（文档）.ready（彩色）；
面对
左眼
右眼

该程序显示人脸，但由于某些原因按钮未显示。非常感谢您的帮助。

您的HTML无效。您在

中有一个不匹配的

标记

不是自动关闭标记。关闭它：

。这可能是没有显示其他内容的主要原因，因为页面的其余部分现在位于object标记内

将可见标记放入

中是没有意义的（也是无效的）。

标签应该放在

中

另外，在JS和SVG文件的末尾，似乎都有一个错误的背景标记

，至少在您的帖子中是这样。最好检查以确保这些按钮不在真实文件中。

顺便说一句，显示的程序实际上是3个独立的程序。请创建一个可复制的示例。您是否尝试检查按钮是否隐藏或根本不在页面上？按钮在标记中，如果没有js或css在操纵/隐藏它们，它们应该显示维护是我扔到jsbin上的一个工作示例非常感谢！

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <object type="image/svg+xml" data="smiley.svg" width="200" height="200">  
  <script type="text/javascript" src="Smiley_Manipulation.js"></script> 
  <script>
    $(document).ready(color);
  </script>
</head>
<body>
    <button id="ChangeFace">Face</button>
    <button id="ChangeLEye">Left Eye</button>
    <button id="ChangeREye">Right Eye</button>
</body>
</html>