Question

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

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

您的代码存在多个问题。首先，你定义了一些从未被调用过的函数，因此它们中的事件挂钩永远不会绑定，有不匹配的大括号，你的小提琴不包含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个元素，因为它们现在通过div属性与所需的href相关。

Answer 2

你没有调用定义的3个函数吗？它不会起作用！

您需要将jquery代码放在$(document).ready()

中

$(document).ready(function(){
$('#USradarChangeButton1').click(function() {
            $('#usradar1').css({
                'display': 'inline'
            });

            $('#usradar2').css({
                'display': 'none'
            });

            $('#usradar3').css({
                'display': 'none'
            });
        });

//BUTTON 2 CODE
//BUTTON 3 CODE

});

Answer 3

问题是您的处理代码没有被执行，因为它们处于从未被调用过的函数中（USradarChange3和朋友）。你可以：

调用函数，以便执行内部绑定代码。
或删除这些功能，因此您无需调用绑定功能。

此外，jsFiddle似乎没有添加jQuery，所以这也可能是一个问题。如果加载了jQuery ，请将所有内容包装在ready处理程序中。确保在绑定之前加载元素。

Answer 4

这里有一些你错了，首先你需要在jsFiddle中提供jQuery库 take a look here

第二：你没有被调用的功能，因此不会将点击处理程序绑定到按钮上。

第三：你需要在完成所有内容加载之后再这样做，所以看起来应该更像这样：

  $(document).ready(function () {
    $('#USradarChangeButton1').click(function (event) {
    event.preventDefault();
    $('#usradar1').css({
        'display': 'inline'
    });

    $('#usradar2').css({
        'display': 'none'
    });

    $('#usradar3').css({
        'display': 'none'
    });

});




$('#USradarChangeButton2').click(function (event) {
    event.preventDefualt();
    $('#usradar1').css({
        'display': 'none'
    });

    $('#usradar2').css({
        'display': 'inline'
    });

    $('#usradar3').css({
        'display': 'none'
    });
});




$('#USradarChangeButton3').click(function () {
    event.preventDefault();
    $('#usradar1').css({
        'display': 'none'
    });

    $('#usradar2').css({
        'display': 'none'
    });

        $('#usradar3').css({
        'display': 'inline'
        });
    });

})

请注意event.preventDefault()这用于防止链接的默认行为。

Answer 5

你的逻辑错了;您当前正在做的是在用户单击按钮后将功能绑定到单击。

当你准备好DOM时，你需要做的是绑定这3个函数。

$(function(){
    $('#USradarChangeButton1').click(function() {
        $('#usradar1').css({'display': 'inline'});
        $('#usradar2').css({'display': 'none'});
        $('#usradar3').css({'display': 'none'});
    });

    $('#USradarChangeButton2').click(function() {
        $('#usradar1').css({'display': 'none'});
        $('#usradar2').css({'display': 'inline'});
        $('#usradar3').css({'display': 'none'});
    });

    $('#USradarChangeButton3').click(function() {
        $('#usradar1').css({'display': 'none'});
        $('#usradar2').css({'display': 'none'});
        $('#usradar3').css({'display': 'inline'});
    });
});

Answer 6

首先，小提琴中缺少jQuery lib，其次，我发现了语法问题。

您已声明一项功能，其中您已注册“点击”事件，但无法正常工作

以下是帮助您实现结果的两种方法

$('#USradarChangeButton1').click(USradarChange1);
$('#USradarChangeButton2').click(USradarChange2);
$('#USradarChangeButton3').click(USradarChange3);

function USradarChange1() {
    $('#usradar1').css({ 'display': 'inline' });
    $('#usradar2').css({ 'display': 'none'});
    $('#usradar3').css({ 'display': 'none'});
}


function USradarChange2()
{
    $('#usradar1').css({'display': 'none'});    
    $('#usradar2').css({'display': 'inline'});    
    $('#usradar3').css({'display': 'none'});
}

function USradarChange3()
{
    $('#usradar1').css({'display': 'none'});
    $('#usradar2').css({'display': 'none'});
    $('#usradar3').css({'display': 'inline'});
}

直接或不直接声明任何这样的函数：

$('#USradarChangeButton1').click(function(){
    $('#usradar1').css({ 'display': 'inline' });
    $('#usradar2').css({ 'display': 'none'});
    $('#usradar3').css({ 'display': 'none'});
});

$('#USradarChangeButton2').click(function(){
    $('#usradar1').css({'display': 'none'});    
    $('#usradar2').css({'display': 'inline'});    
    $('#usradar3').css({'display': 'none'});
});

$('#USradarChangeButton2').click(function(){
    $('#usradar1').css({'display': 'none'});
    $('#usradar2').css({'display': 'none'});
    $('#usradar3').css({'display': 'inline'});
});

希望它会帮助你

Javascript / jQuery更改CSS单击不工作

6 个答案: