Javascript/jQuery 在单击时更改 CSS 不起作用

Question

我正在尝试制作三个不同的按钮，使用 CSS 显示属性在三个不同的图像之间切换(这样所有图像都会在网页加载时加载)。但是，它不起作用，我不知道我的代码有什么问题。

https://jsfiddle.net/agt559e8/ -- 我的代码

function USradarChange1() {
    //document.getElementById("usradar1").src="weather/current-usradar.gif";
    $('#USradarChangeButton1').click(function() {
        $('#usradar1').css({ 'display': 'inline' });
        $('#usradar2').css({ 'display': 'none' });
        $('#usradar3').css({ 'display': 'none' });
    });
}

function USradarChange2() {
    //document.getElementById("usradar2").src="weather/usradar-an12hour.gif";
    $('#USradarChangeButton2').click(function() {
        $('#usradar1').css({ 'display': 'none' });
        $('#usradar2').css({ 'display': 'inline' });
        $('#usradar3').css({ 'display': 'none' });
    });
}

function USradarChange3() {
    //document.getElementById("usradar3").src="weather/usradar-an7day.gif";
    $('#USradarChangeButton3').click(function() {
        $('#usradar1').css({ 'display': 'none' });
        $('#usradar2').css({ 'display': 'none' });
        $('#usradar3').css({ 'display': 'inline' });
    });
}

<div class="button-container">
    <a class="button" id="USradarChangeButton1">Current US Radar</a>
    <a class="button" id="USradarChangeButton2">US Radar 12 Hours</a>
    <a class="button" id="USradarChangeButton3">US Radar 7 Days</a>
</div>

<div id="imgcontainer">
    <img class="radar-img" id="usradar1" src="weather/current-usradar.gif" alt="Current US Radar">
    <img class="radar-img" id="usradar2" src="weather/usradar-an7day.gif" alt="Current US Radar">
    <img class="radar-img" id="usradar3" src="weather/usradar-an12hour.gif" alt="Current US Radar">
</div>

有什么想法吗？

Answer 1

您的代码存在几个问题。首先，您定义了一些从未被调用的函数，因此它们中的事件 Hook 永远不会被绑定(bind)，存在不匹配的大括号，并且您的 fiddle 不包含 jQuery 本身。

抛开这些问题不谈，您的代码可以通过使用 DRY 原则来改进。试试这个:

<div class="button-container"> 
    <a class="button" id="USradarChangeButton1" href="#usradar1">Current US Radar</a>
    <a class="button" id="USradarChangeButton2" href="#usradar2">US Radar 12 Hours</a>
    <a class="button" id="USradarChangeButton3" href="#usradar3">US Radar 7 Days</a>
</div>

<div id="img-container">
    <img class="radar-img" id="usradar1" src="http://trendting.com/wp-content/uploads/2014/05/giphy-225.gif" alt="Current US Radar" />
    <img class="radar-img" id="usradar2" src="https://media3.giphy.com/media/H3MXq3XT4z2ec/200_s.gif" alt="US Radar 12 Hours" />
    <img class="radar-img" id="usradar3" src="http://media.giphy.com/media/10Ocy3t9qoSOwE/giphy.gif" alt="US Radar 7 Days" />
</div>

$(function() {
    $('.button').click(function(e) {
        e.preventDefault();
        $('#img-container img').hide();
        $($(this).attr('href')).show();
    });
});

Example fiddle

请注意，此单个 click 处理程序现在适用于所有 .button 元素，因为它们现在通过 href 属性。