Jquery, если видимый условно не работает - PullRequest
Новая
       22

Jquery, если видимый условно не работает

2 голосов
/ 28 марта 2010

У меня есть страница, которая использует jQuery: http://treethink.com/services То, что я пытаюсь сделать, - это показать слайд или подстраницу, изменить цвет фона и цвет кнопки.

Для этого я попытался сказать, что если отображается какой-то div, цвет фона определенной кнопки изменяется. Однако вы можете видеть, что он не работает должным образом, он меняет цвет для веб-сайта, но не удаляет изменение цвета и добавляет изменение цвета на другую кнопку при смене страниц.

Вот общий код: 

/* Hide all pages except for web */

$("#services #web-block").show();
$("#services #print-block").hide();
$("#services #branding-block").hide();

/* When a button is clicked, show that page and hide others */

$("#services #web-button").click(function() {

    $("#services #web-block").show();
    $("#services #print-block").hide();
    $("#services #branding-block").hide();

});

$("#services #print-button").click(function() {

    $("#services #print-block").show();
    $("#services #web-block").hide();
    $("#services #branding-block").hide();

});

$("#services #branding-button").click(function() {

    $("#services #branding-block").show();
    $("#services #web-block").hide();
    $("#services #print-block").hide();

}); 

/* If buttons are active, disable hovering */

if ($('#services #web-block').is(":visible")) { 

    $("#services #web-button").css("background", "#444444");
    $("#services #web-button").css("color", "#999999");

}

if ($('#services #print-block').is(":visible")) { 

    $("#services #print-button").css("background", "#444444");
    $("#services #print-button").css("color", "#999999");

}

if ($('#services #branding-block').is(":visible")) { 

    $("#services #branding-button").css("background", "#444444");
    $("#services #branding-button").css("color", "#999999");

}

Спасибо

Wade

Ответы [ 3 ]

3 голосов
/ 29 марта 2010

Извините, что это немного не связано, но вы могли бы сэкономить, упростив свой код:

Ваша версия: 

if ($('#services #web-block').is(":visible")) { 

        $("#services #web-button").css("background", "#444444");
        $("#services #web-button").css("color", "#999999");

    } else if ($('#services #web-block').is(":hidden")) { 

        $("#services #web-button").css("background", "#000000");
        $("#services #web-button").css("color", "#999999");
        $("#services #web-button:hover").css("background", "#666666");
        $("#services #web-button:hover").css("color", "#ffffff");

    }

Более простая версия: 

if ($('#services #web-block').is(":visible")) { 
        $("#services #web-button").css({"background":"#444444"), "color":"#999999"});
    } else { 
        $("#services #web-button").css({ "background":"#000000", "color":"#999999" });
        $("#services #web-button:hover").css({ "background":"#666666", "color":"#ffffff" });
    }

Они должны работать одинаково. Вот и все.

1 голос
/ 29 марта 2010

Ваши if операторы выполняются только один раз. При переключении страниц операторы if больше не запускаются, поэтому ничего не меняется.

Вам необходимо поместить операторы if в функцию, а затем вызвать функцию как сразу, так и после переключения страниц.

Кстати, вы можете установить несколько свойств одним вызовом css, например: 

$("#services #print-button").css({
    background: "#444444",
    color: "#999999"
});
0 голосов
/ 29 марта 2010

Спасибо, SLaks, ваше предложение сработало, но по какой-то причине оно не позволит мне сбросить зависания css. Когда кнопка div возвращается в неактивное состояние, она не будет зависать.

/ * Скрыть все страницы, кроме сети * / 

$("#services #web-block").show();
$("#services #print-block").hide();
$("#services #branding-block").hide();
activeButton();

/* When a button is clicked, show that page and hide others */

$("#services #web-button").click(function() {

    $("#services #web-block").show();
    $("#services #print-block").hide();
    $("#services #branding-block").hide();
    activeButton();

});

$("#services #print-button").click(function() {

    $("#services #print-block").show();
    $("#services #web-block").hide();
    $("#services #branding-block").hide();
    activeButton();

});

$("#services #branding-button").click(function() {

    $("#services #branding-block").show();
    $("#services #web-block").hide();
    $("#services #print-block").hide();
    activeButton();

}); 

/* If buttons are active, disable hovering */

function activeButton() {

    if ($('#services #web-block').is(":visible")) { 

        $("#services #web-button").css({background: "#444444", color: "#999999"});


    } else if ($('#services #web-block').is(":hidden")) { 

        $("#services #web-button").css({background: "#000000", color: "#999999"});
        $("#services #web-button:hover").css({background: "#666666", color: "#ffffff"});

    } 

    if ($('#services #print-block').is(":visible")) { 

        $("#services #print-button").css({background: "#444444", color: "#999999"});

    } else if ($('#services #print-block').is(":hidden")) { 

        $("#services #print-button").css({background: "#000000", color: "#999999"});
        $("#services #print-button:hover").css({background: "#666666", color: "#ffffff"});

    }

    if ($('#services #branding-block').is(":visible")) { 

        $("#services #branding-button").css({background: "#444444", color: "#999999"});

    } else if ($('#services #branding-block').is(":hidden")) { 

        $("#services #branding-button").css({background: "#000000", color: "#999999"});
        $("#services #branding-button:hover").css({background: "#666666", color: "#ffffff"});

    }

}
...