用Javascript / Jquery替换内容

Question

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>

将此放入我的WordPress标头中。 CSS很好。 HTML很好。 JavaScript无法正常工作。 救命？

Answer 1

我不太确定什么“无效”（因为您显示的小提琴工作正常），但是我确实设法清理了一下代码。 更干燥的是 ，速度为0的fadeOut与hide() / show() ， 并且jQuery.data（）用于检索data-region 。

的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

.fieldsgame {
    display:none;
}

JS

$('.tablereplace a').click(function () {

    $('#fieldsmatch, .fieldsgame').hide();
    var region = $(this).data('region');
    $('#' + region).show();

});

JSFiddle 。

===更新===

根据您的评论，我在实时页面上发现了以下差异 ：

<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>

您指定的click功能基于.tablereplace a选择器。 但是，在您的网站，没有任何a里面发现.tablereplace 。 换句话说，您的HTML是错误的。