在研究这个问题的答案时,我创造了这个jsfiddle.由于某种原因,它不起作用,当我使用firebug的错误consol时它返回".show"不是一个函数.这让我相信jsfiddle错误地加载jQuery.JSFiddle和jQuery之间是否存在任何已知问题?我的代码是不正确的(BTW当我.show("slow")改为.style.display = "inherit"它工作正常,这就是为什么我认为它必须是jQuery的问题...)
一个工作的JSFiddle将不胜感激.
我是jQuery的新手,整天都在试图确定这个脚本在jsFiddle中运行但不在我的计算机上的原因.我没有服务器设置,我只是从桌面启动浏览器中的html.
代码在这里工作正常:http://jsfiddle.net/9Dubr/164/.但是当我创建以下html文件时:
<html>
<head>
<title>this better work</title>
<script src="jquery-latest.js"></script>
<script type="text/javascript">
$('#submit').click(function(){
$('#myfrom').fadeOut("slow", function(){
var dot = $("<div id='foo'>Goodmorning Mr. Patti<br/><br/>Thank you.</div>".hide();
$(this).replaceWith(dot);
$('#foo').fadeIn("slow");
});
});
</script>
<style type="text/css">
#container{
width:342px;
height:170px;
padding:10px;
background-color:grey;
}
#myform{
width:322px;
height:100px;
color:#6F6F6F;
padding: 0px;
outline:none;
background-color:white;
}
#foo{
width:322px;
height:100px;
color:#6F6F6F;
padding: 0px;
outline:none;
background-color:white;
}
#submit{
color:#6F6F6F;
padding: 10px 2px 0px 0px;
margin: 0px 0px 0px 0px;
outline:none;
}
</style>
</head>
<body>
<div id="container">
<div id="myform">
<p> blah …Run Code Online (Sandbox Code Playgroud) 我想在jsFiddle中使用javascript的yield关键字(类似于C#yield return).我知道 yield这只适用于Firefox,我想进行一次性模拟,因此它不必是跨平台的.是否可以将jsFiddle的javascript设置为1.7版?
我正试图在jsFiddle中实现谷歌地图问另一个问题,但我看不到地图:http: //jsfiddle.net/hashie5/aknYP/
我在资源中添加了gmap脚本
如何在jsFiddle中显示地图?
function initialize() {
var myLatlng = new google.maps.LatLng(50.965049,5.484231);
var myOptions = {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var contentString =
'<div id="infowindow">' +
'Galaconcert<br />' +
'Jaarbeurslaan 2-6<br />' +
'3690 Genk' +
'</div>'
;
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Galaconcert'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
}
Run Code Online (Sandbox Code Playgroud) 两个不同的输出,但完全相同的超基本代码:
CSS
input {
display: block;
min-width: 200px;
padding: 10px;
}
Run Code Online (Sandbox Code Playgroud)
HTML
<input type="text" />
<input type="text" />
<input type="submit" value="Register" />
Run Code Online (Sandbox Code Playgroud)
在jsFiddle上生成以下输出(这里是现场演示),

但这个输出在jsBin(这里的现场演示)

我已经在最新的Firefox和Chrome中测试了这一点(各处都有相同的差异).在一个简单的裸.html文件中,它看起来像在jsBin btw ...
我正在尝试对jsfiddle进行jquery ajax调用但是遇到了问题:
var ajax1 = function () {
return $.ajax({
type: "post",
url: "/echo/json/",
data: {
name: "thomas!"
},
dataType: 'json'
});
};
var res = ajax1();
console.log(res);
Run Code Online (Sandbox Code Playgroud)
将整个延迟对象打印到控制台.它包括responseText我认为可能是我应该尝试访问的内容,但我未定义.
console.log(res.responseText);
Run Code Online (Sandbox Code Playgroud)
我还在学习jQuery,我在网上提到了一些教程.我从这个站点获取了我的代码并将其插入JSFiddle以尝试但它没有工作:
HTML
<input id="mytextbox" style="width:300px" placeholder="Only English letters are allowed here...">
Run Code Online (Sandbox Code Playgroud)
JS
$("#mytextbox").on("keypress", function(event) {
// Disallow anything not matching the regex pattern (A to Z uppercase, a to z lowercase and white space)
// For more on JavaScript Regular Expressions, look here: https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Regular_Expressions
var englishAlphabetAndWhiteSpace = /[A-Za-z ]/g;
// Retrieving the key from the char code passed in event.which
// For more info on even.which, look here: http://stackoverflow.com/q/3050984/114029
var key = String.fromCharCode(event.which);
//alert(event.keyCode);
// For the keyCodes, look …Run Code Online (Sandbox Code Playgroud) 我正在研究jsfiddle,但javascript文件似乎没有添加到我的html中.当屏幕达到一定宽度时,我正试图从我的页脚上的div中删除一个类.我正在使用bootstrap,我有以下页脚:
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<body>
<footer>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<h2><b>Heading1</b></h2>
<p><small>aaaaaaaaaaaaaaaaaaaaaaa</small></p>
<p><small>aaaaaaaaaaaaaaaaaaaaaaa</small></p>
<p><small>aaaaaaaaaaaaaaaaaaaaaaa</small></p>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="text-right" id="footer-right">
<h2><b>Heading2</b></h2>
<p><small>aaaaaaaaaaaaaaaaaaaaaaa</small></p>
<p><small>aaaaaaaaaaaaaaaaaaaaaaa</small></p>
<p><small>aaaaaaaaaaaaaaaaaaaaaaa</small></p>
</div>
</div>
</div>
</div>
</footer>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
Run Code Online (Sandbox Code Playgroud)
现在,我希望在屏幕宽度为500px时删除"text-right"类:
JAVASCRIPT
var readaptClasses = function(){
var width = $(window).width();
alert(width);
if (width < 500){
$("#footer-right").removeClass("text-right"):
}
else {
$("#footer-right").addClass("text-right"):
}
};
$(document).ready(readaptClasses);
$(window).on('resize', readaptClasses);
Run Code Online (Sandbox Code Playgroud)
什么都没发生...
在Chrome浏览器中,当尝试从远程URL测试画布绘图图像时,在jsfiddle上收到以下错误。
错误:无法在“ HTMLCanvasElement”上执行“ toDataURL”:可能无法导出污染的画布。
在S3存储桶上,我具有以下CORS策略,该策略允许跨资源共享:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
Run Code Online (Sandbox Code Playgroud)
如果我使用jsfiddle卷曲图像作为原点,则会得到:
curl -H 'Origin: https://fiddle.jshell.net' -I 'https://i.ezr.io/products3/472_ARDSCR.jpg?h=45&w=165&fit=scale'
HTTP/1.1 200 OK
Cache-Control: public,max-age=31536000
Last-Modified: Wed, 07 Feb 2018 23:42:47 GMT
Server: imgix-fe
Content-Length: 6371
Accept-Ranges: bytes
Date: Fri, 16 Mar 2018 17:10:20 GMT
Age: 3173253
Connection: keep-alive
Content-Type: image/jpeg
Access-Control-Allow-Origin: *
X-Content-Type-Options: nosniff
X-Served-By: cache-lax8630-LAX, cache-sea1027-SEA
X-Cache: HIT, HIT
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
Run Code Online (Sandbox Code Playgroud)
var Rack = {
init: function(params) …Run Code Online (Sandbox Code Playgroud)jsfiddle ×10
javascript ×7
jquery ×6
html ×3
jsbin ×2
ajax ×1
cors ×1
css ×1
google-maps ×1
html5-canvas ×1
regex ×1