标签: jsfiddle
Javascript:Eventhandler无法运行,可以在JSFiddle中运行
所以这是我发布的另一个问题的答案,我认为这是正确的解决方案.然而,虽然它在jsfiddle中运行得非常好,但它在该环境之外并不起作用.我尝试了多种组合,但我无法正常工作.
我已经尝试onLoad了在主体中,Window.onload在标题环绕函数并在所有元素加载后在页面底部单独调用它.什么都行不通.
我总是遇到这个问题:
未捕获的TypeError:无法调用null的方法'addEventListener'
这是令人沮丧的,因为我看到的所有其他解决此错误的解决方案都围绕着确保您确实拥有处理程序在HTML中触发的指定ID.我做的.
我知道在这里发帖子可能有点过头了但是我把头发拉了出来.
这是JSfiddle:http://jsfiddle.net/fFW5r/1/
这是我用来测试概念的模型页面(它永远不会起作用):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var link_container = document.getElementById('links');
function myFunction(){ link_container.addEventListener('click', function(e){
if(e.target.nodeName === "A"){
var href = e.target.getAttribute('href'),
selfhost = window.location.hostname;
if(href.indexOf(selfhost) !== -1){
alert('Inbound link clicked');
} else {
alert('Outbound link clicked');
}
}
}, false);
}
</script>
</head>
<body onload="myFunction()">
<div id="links">
<a href="http://fiddle.jshell.net/#foo">Inbound Link</a>
<a …推荐指数
解决办法
查看次数
如何使用jQuery切换显示这两个元素？
所以,我编写了一个快速的jQuery函数,让我知道我正在寻找什么,如果有人可以帮我解决这个问题.我读了一些关于让一个元素隐藏而另一个元素显示的帖子.我对jQuery没有太多经验,所以我提前道歉.我找到的是你可以同时调用,或者你可以使用第二个语句作为回调.我真的只是想找一些能够以适度淡化来切换两者显示的东西.我记得我不希望三角形移动,它应该好像文本只是在三角形内部改变.但我在这里所拥有的似乎并不有效.我想在页面加载时隐藏第二个三角形,但我无法得到它,而且我也无法在点击时隐藏第一个三角形.我只是想快速解决这个问题.提前致谢.
这是HTML:
<div class="buttons">
<div class="container">
<div class="button1"><p>1</p></div>
<div class="button2"><p>2</p></div>
</div>
</div>
配合jQuery功能:
$(window).load(function(){
$('.button2').hide();
});
$('.button1').click(function(){
$('.button1').hide();
$('.button2').show();
});
$('.button2').click(function(){
$('.button2').hide();
$('.button1').show();
});
有点CSS:
.buttons{
width:100%;
}
.buttons .container{
text-align:center;
}
.button1, .button2{
display:inline-block;
width:0;
height:0;
border-left:40px solid transparent;
border-right:40px solid transparent;
border-top:40px solid #CC0000;
cursor:hand; cursor:pointer;
}
.button1 p, .button2 p{
position:absolute;
color:#F9F9F9;
z-index:9999;
margin-top:-30px;
margin-left:-2px;
font-size:7px;
}
如果有人想改变任何东西,这里是一个jsfiddle.
推荐指数
解决办法
查看次数
Angular JS + CoffeeScript + JSFiddle:代码不能正常工作
我今天开始玩CoffeeScript和AngularJS,并注意到没有很多关于如何使用CoffeeScript正确编写AngularJS的文档或示例.我自己的实验似乎没有奏效.作为一个教学上的例外,有人能指出我为什么这个小提琴不起作用？
http://jsfiddle.net/dralexmv/8km8x/4/
它声称没有定义InventoryModule.虽然我已经在第一行宣布了它.
这是HTML:
<div ng-app='InventoryModule' ng-controller='InventoryController'>
<table>
<tr ng-repeat='item in items'>
<td>{{item.title}}</td>
<td>{{item.price | currency}}</td>
</tr>
</table>
这就是CoffeeScript:
inventoryModule = angular.module 'InventoryModule', []
inventoryModule.factory 'Items', ->
items = {}
items.query -> [
{title: 'Table', price: '5'},
{title: 'Chair', price: '10'}
]
items
inventoryModule.controller 'InventoryController', ($scope, Items) ->
$scope.items = Items.query
推荐指数
解决办法
查看次数
如何无限循环jQuery画廊
我使用jQuery创建了一个图像幻灯片,其中5个图像在25秒的间隔内一个接一个地出现.每个图像在淡出之前保持5秒,然后下一个图像淡入.
幻灯片显示正常但我希望它永远循环, 即在最后一个图像淡出后,它应该从第一个图像重新开始动画.
我试过用setInterval但不能成功.这是我编写的幻灯片的工作示例:
这是完整的代码:
HTML:
<img id="img1" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000.jpg" style="display: block; width: 50%; position: absolute;" />
<img id="img2" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-1.jpg" style="display: block; width: 50%; position: absolute;" />
<img id="img3" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-2.jpg" style="display: block; width: 50%; position: absolute;" />
<img id="img4" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-3.jpg" style="display: block; width: 50%; position: absolute;" />
<img id="img5" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-4.jpg" style="display: block; width: 50%; position: absolute;" />
使用Javascript:
$(document).ready(function(){
$("#img2,#img3,#img4,#img5").hide();
setTimeout(function(){
$("#img1").fadeOut("slow", function () {});
}, 5000);
setTimeout(function(){
$("#img2").fadeIn("slow", …推荐指数
解决办法
查看次数
Jquery 选择带有文本的选项无法正常工作
我正在尝试使用 JQuery 选择具有特定文本的选项，但我不确定如何过滤掉我正在查找的文本。
我正在尝试选择“大”选项，而不是“XLarge”选项。关于我如何实现这一目标有什么想法吗？
这是 HTML：
<span class="price">
$20
</span>
<p id="in-carHEREt" style="display: none;">in cartHERE</p>
<span class="needsclick select-widget enabled" id="size-options-link">Medium</span>
<select id="size-options" name="size-options" class="select-widget ">
<option value="46158">Medium</option>
<option value="46159">Large</option>
<option value="46160">XLarge</option>
</select>
<span id="cart-update"><span class="cart-button">add to cart</span></span>
这是 JQuery：
$('#size-options').find('option:contains(Large)').prop('selected', true);
此代码最终选择 XLarge 尺寸而不是首选的 Large 尺寸。这是我的 JSFiddle：https ://jsfiddle.net/MGames/8o4u36a6/1/
注意：不要将其标记为重复，因为我在与此类似的问题上尝试过的几乎所有代码都不适用于我的问题。谢谢你和我爱你很久了:)
推荐指数
解决办法
查看次数
将Firebug Lite添加到JSFiddle以最小化启动
Firebug是Web上最好的开发工具.现在,先进的设备齐全的开发人员工具已经转移到每个主流浏览器,我们不需要寻找它.但有时候在共享JSFiddle代码时会打印一些日志console,或者只是需要窥视html,attributes或者classnames只是将Firebug脚本包含在小提琴中而不是提出整个开发人员工具对我来说似乎更方便.
但是当我将Firebug Lite添加到JSFiddle时,它启动就像阻止大多数(如果不是整个输出框架)一样.在我的笔记本电脑上它会阻挡整个画面.
我怎样才能包括Firebug的精简版来的jsfiddle,在最小化模式时,它最小化或者启动后,像作为底部横条这样的形象在右下角的小广场？
推荐指数
解决办法
查看次数
通过单击切换背景颜色更改
我正在快速做一个jsFiddle以了解更多有关jQuery API的信息,而且一个小提琴并没有像我预期的那样工作.
jsFiddle:http://jsfiddle.net/7j5Fc/
HTML:
<div></div>
CSS:
div {
background:red;
height:100px;
width:150px;
}
JS:
$('div').click(
function(){
$(this).toggle(function(){
$(this).style.background="blue";
}
//function(){
//this.style.background = "orange";
//}
);
}
);
奇怪的是,当我点击它时,div消失了,如果我取消注释注释的行,草图根本不起作用.任何建议或信息赞赏.
推荐指数
解决办法
查看次数
作为参数的数组未定义
刚试过JSFiddle中的这段代码(学习JS atm):
var checkArrayForDuplicates = new function(arrayToCheck, content) {
alert(arrayToCheck);
}
var numbers = new Array(1, 2, 3, 4, 5, 5);
checkArrayForDuplicates(numbers, 5);
但是函数内的arrayToCheck(数字)总是未定义的.:(
推荐指数
解决办法
查看次数
为什么这个关键字不是指独立JS函数中的窗口
我只是想确定范围和这个关键字在JS,在写下面的代码,我做到了,我期待困惑console.log(a)打完电话后f()要5,而是它给了我10.
我的问题是:
this独立功能中的关键字是不是指window？- 如果是,那么函数内部的代码是不是
window.a = 5和a应该更新的值相同5？ - 如果不是,为什么会
console.log(this)导致窗口,但a(不是全局)的值不会更新？
var a = 10;
function f(){
this.a = 5;
console.log(a);
}
console.log(a);
f();
console.log(a);
推荐指数
解决办法
查看次数
jsFiddle onload和no-wrap in body
我试图让自己开始使用jsFiddle.所以我尝试运行一个简单的代码片段,其中包含所有HTML,CSS和JavaScript代码.
Javascript不起作用如果我在Frameworks&Extensions下拉列表中选择onLoad
但是当我从下拉菜单中选择No Wrap-in时它确实有效
你能告诉我这是什么意思吗？我已经阅读过关于未在jsfiddle.net上运行的 SO JavaScript的这个问题
但无法理解那里提到的解决方案.
推荐指数
解决办法
查看次数
标签 统计
jsfiddle ×10
javascript ×8
jquery ×4
html ×3
angularjs ×1
coffeescript ×1
css ×1
firebug-lite ×1
minimize ×1
minimized ×1
slideshow ×1