[英]Replace Content with Javascript/Jquery
http://jsfiddle.net/bUjx7/31 http://jsfiddle.net/bUjx7/31
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
.fieldsgame1 {
display:none;
}
.fieldsgame2 {
display:none;
}
.fieldsgame3 {
display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.tablereplace a').click(function () {
$('.fieldsmatch').fadeOut(0);
$('.fieldsgame1').fadeOut(0);
$('.fieldsgame2').fadeOut(0);
$('.fieldsgame3').fadeOut(0);
var region = $(this).attr('data-region');
$('#' + region).fadeIn(0);
});
});
</script>
Put this into my WordPress header. 将此放入我的WordPress标头中。 CSS is fine.
CSS很好。 HTML is fine.
HTML很好。 Javascript isn't working.
JavaScript无法正常工作。 Help?
救命?
I'm not really sure what "isn't working" (since the Fiddle you're showing is working fine), but I did manage to clean up your code a bit. 我不太确定什么“无效”(因为您显示的小提琴工作正常),但是我确实设法清理了一下代码。 It's more DRY ,
fadeOut
with speed of 0 is the same as hide()
/ show()
, & jQuery.data() is used to retrieve the data-region
. 更干燥的是 ,速度为0的
fadeOut
与hide()
/ show()
, 并且jQuery.data()用于检索data-region
。
HTML 的HTML
<div class="tablereplace">
<a data-region="fieldsmatch" href="#">Match</a>
<a data-region="fieldsgame1" href="#">Game 1</a>
<a data-region="fieldsgame2" href="#">Game 2</a>
<a data-region="fieldsgame3" href="#">Game 3</a>
<div id="fieldsmatch" class="fieldsmatch">8-0</div>
<div id="fieldsgame1" class="fieldsgame">7-1</div>
<div id="fieldsgame2" class="fieldsgame">6-2</div>
<div id="fieldsgame3" class="fieldsgame">1-0</div>
</div>
CSS 的CSS
.fieldsgame {
display:none;
}
JS JS
$('.tablereplace a').click(function () {
$('#fieldsmatch, .fieldsgame').hide();
var region = $(this).data('region');
$('#' + region).show();
});
=== UPDATE === ===更新===
Based on your comment, I found the following difference on the live page: 根据您的评论,我在实时页面上发现了以下差异 :
<a href="#vsfield" data-region="fieldsmatch">Match</a>
<a href="#vsfield" data-region="fieldsgame1">Game 1</a>
<a href="#vsfield" data-region="fieldsgame2">Game 2</a>
<a href="#vsfield" data-region="fieldsgame3">Game 3</a>
<div class="tablereplace">
<div class="fieldsmatch" id="fieldsmatch">8-0</div>
<div class="fieldsgame" id="fieldsgame1">7-1</div>
<div class="fieldsgame" id="fieldsgame2">6-2</div>
<div class="fieldsgame" id="fieldsgame3">1-0</div>
</div>
Your specified click
function is based on the .tablereplace a
selector. 您指定的
click
功能基于.tablereplace a
选择器。 But, on your site, there isn't any a
found inside the .tablereplace
. 但是,在您的网站,没有任何
a
里面发现.tablereplace
。 In other words, your HTML is wrong. 换句话说,您的HTML是错误的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.