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

我不确定“什么不行”（因为你展示的小提琴工作正常），但我确实设法清理了你的代码。它更DRY，速度为0的fadeOut与hide() / show()相同，＆amp; 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是错误的。

用Javascript / Jquery替换内容

1 个答案: