需要帮助使这串Javascript起作用 [英] Need helping getting this string of Javascript to work
问题描述
这是我正在使用的东西:
<script>
$(document).ready(function() {
$("#cf7_controls").on('click', 'span', function() {
$("#cf7 img").removeClass("opaque");
var newImage = $(this).index();
$("#cf7 img").eq(newImage).addClass("opaque");
$("#cf7_controls span").removeClass("selected");
$(this).addClass("selected");
});
});
</script> <div class="row">
<div class="span 6">
<div id="cf7" class="shadow">
<img class='opaque' src="/img/Cirques.jpg" />
<img src="/img/ClownFish.jpg" />
<img src="/img/Stones.jpg" />
<img src="/img/Summit.jpg" />
</div>
<p id="cf7_controls">
<span class="selected">Image 1</span>
<span>Image 2</span>
<span>Image 3</span>
<span>Image 4</span>
</p>
</div>
<div class="span 6">
<div id="cf7" class="shadow">
<img class='opaque' src="img/Cirques.jpg" />
<img src="img/ClownFish.jpg" />
<img src="img/Stones.jpg" />
<img src="img/Summit.jpg" />
</div>
<p id="cf7_controls">
<span class="selected">Image 1</span>
<span>Image 2</span>
<span>Image 3</span>
<span>Image 4</span>
</p>
</div>
我从 http://css3.bradshawenterprises.com/cfimg/#cfimg7
不幸的是,它无法正常工作.可以在 http://marc-with-ac.com 上查看我的WIP实时演示. >
google chrome中的错误是: 未捕获的ReferenceError:$未定义marc-with-a-c.com/:97
感谢您的帮助!
您的页面中没有jQuery库
在脚本元素之前添加以下行以包含jQuery:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function() {
$("#cf7_controls").on('click', 'span', function() {
$("#cf7 img").removeClass("opaque");
var newImage = $(this).index();
$("#cf7 img").eq(newImage).addClass("opaque");
$("#cf7_controls span").removeClass("selected");
$(this).addClass("selected");
});
});
</script>
Here is what I am working with:
<script>
$(document).ready(function() {
$("#cf7_controls").on('click', 'span', function() {
$("#cf7 img").removeClass("opaque");
var newImage = $(this).index();
$("#cf7 img").eq(newImage).addClass("opaque");
$("#cf7_controls span").removeClass("selected");
$(this).addClass("selected");
});
});
</script> <div class="row">
<div class="span 6">
<div id="cf7" class="shadow">
<img class='opaque' src="/img/Cirques.jpg" />
<img src="/img/ClownFish.jpg" />
<img src="/img/Stones.jpg" />
<img src="/img/Summit.jpg" />
</div>
<p id="cf7_controls">
<span class="selected">Image 1</span>
<span>Image 2</span>
<span>Image 3</span>
<span>Image 4</span>
</p>
</div>
<div class="span 6">
<div id="cf7" class="shadow">
<img class='opaque' src="img/Cirques.jpg" />
<img src="img/ClownFish.jpg" />
<img src="img/Stones.jpg" />
<img src="img/Summit.jpg" />
</div>
<p id="cf7_controls">
<span class="selected">Image 1</span>
<span>Image 2</span>
<span>Image 3</span>
<span>Image 4</span>
</p>
</div>
I pulled this code from http://css3.bradshawenterprises.com/cfimg/#cfimg7
Unfortunately, it doesn't work right. A live demo of my WIP can be viewed on http://marc-with-a-c.com
The error in google chrome is: Uncaught ReferenceError: $ is not defined marc-with-a-c.com/:97
Thanks for helping!
You does not have jQuery library included in the page
Add the line to include jQuery before the script element:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function() {
$("#cf7_controls").on('click', 'span', function() {
$("#cf7 img").removeClass("opaque");
var newImage = $(this).index();
$("#cf7 img").eq(newImage).addClass("opaque");
$("#cf7_controls span").removeClass("selected");
$(this).addClass("selected");
});
});
</script>
这篇关于需要帮助使这串Javascript起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!