0

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 不工作。帮助？

4

1 回答 1

0

我不太确定什么“不起作用”（因为您展示的小提琴工作正常），但我确实设法清理了您的代码。它更DRY，fadeOut速度为 0 与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();

});

JSF中。

=== 更新 ===

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

<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 是错误的。

于 2013-03-02T19:41:15.633 回答