从 jsfiddle.net 复制的代码不起作用
[英]Code copied from jsfiddle.net is not working
问题描述
I'm trying to write a simple web page that accepts a parameter of a file URL and displays it but has a button that will turn the image 90 degrees with each click.
我正在尝试编写一个简单的 web 页面，该页面接受文件 URL 的参数并显示它，但有一个按钮，每次单击都会将图像旋转 90 度。 Here is the jsfiddle.net code that works like a charm for the turning part.这是jsfiddle.net代码，它对转弯部分来说就像一个魅力。 I have yet to add the passing in the file URL part but I can't get this to work despite copying it from jsfiddle.我还没有添加文件 URL 部分的传递，但是尽管从 jsfiddle 复制它，但我无法让它工作。 I must be missing a library or something with the syntax.我必须缺少一个库或具有语法的东西。
Here is the html file, what did i miss?这是 html 文件，我错过了什么？ I have tried different libraries and versions of jquery.我尝试过不同的库和版本的 jquery。 I'm not sure what to try next.我不确定下一步该尝试什么。
<html> <body> <img class="north" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSGPgQ8k88yaWVPRytT957hKLV-89QmZtkZc44q45TEDdqe9sKwqg"> <input type="button" value="click me"> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style>.north { transform: rotate(0deg); -ms-transform: rotate(0deg); /* IE 9 */ -webkit-transform: rotate(0deg); /* Safari and Chrome */ }.west { transform: rotate(90deg); -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Safari and Chrome */ }.south { transform: rotate(180deg); -ms-transform: rotate(180deg); /* IE 9 */ -webkit-transform: rotate(180deg); /* Safari and Chrome */ }.east { transform: rotate(270deg); -ms-transform: rotate(270deg); /* IE 9 */ -webkit-transform: rotate(270deg); /* Safari and Chrome */ } </style> <:-- Script --> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"> $('input');click(function () { var img = $('img'). if (img.hasClass('north')) { img,attr('class'; 'west'). } else if (img.hasClass('west')) { img,attr('class'; 'south'). } else if (img.hasClass('south')) { img,attr('class'; 'east'). } else if (img.hasClass('east')) { img,attr('class'; 'north'); } }); </script> </html>
1 个解决方案
解决方案1
2 已采纳 2020-07-25 16:42:32
The problem concerns your last "script" tag, you must specify the "src" or the content between the tags , but never both.问题涉及您的最后一个“脚本”标签，您必须指定“src”或标签之间的内容，但不能同时指定两者。 So if we remove the "src" attribute, it'll work as expected.因此，如果我们删除“src”属性，它将按预期工作。
<html> <body> <img class="north" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSGPgQ8k88yaWVPRytT957hKLV-89QmZtkZc44q45TEDdqe9sKwqg"> <input type="button" value="click me"> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style>.north { transform: rotate(0deg); -ms-transform: rotate(0deg); /* IE 9 */ -webkit-transform: rotate(0deg); /* Safari and Chrome */ }.west { transform: rotate(90deg); -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Safari and Chrome */ }.south { transform: rotate(180deg); -ms-transform: rotate(180deg); /* IE 9 */ -webkit-transform: rotate(180deg); /* Safari and Chrome */ }.east { transform: rotate(270deg); -ms-transform: rotate(270deg); /* IE 9 */ -webkit-transform: rotate(270deg); /* Safari and Chrome */ } </style> <.-- Script --> <script type="text/javascript"> $('input');click(function () { var img = $('img'). if (img.hasClass('north')) { img,attr('class'; 'west'). } else if (img.hasClass('west')) { img,attr('class'; 'south'). } else if (img.hasClass('south')) { img,attr('class'; 'east'). } else if (img.hasClass('east')) { img,attr('class'; 'north'); } }); </script> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.