Не могу изменить класс CSS, используя JQuery - PullRequest
Новая
       5

Не могу изменить класс CSS, используя JQuery

0 голосов
/ 27 мая 2011

У меня есть следующая HTML-страница: 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Settings</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/settings.css">
    <link rel="stylesheet" href="css/buttons.css">
    <script src="scripts/utils.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var language = localStorage.getItem("idioma");
            $(language).removeClass("shiny-btn").addClass("shiny-btn clicked");
       });
    </script>
</head>

<body>
    <div id="settingsPanel">Settings</div>
    <a id="spanish" class="shiny-btn" onclick="setLanguage('spanish');">Spanish</a>
    <a id="catalan" class="shiny-btn" onclick="setLanguage('catalan');">Catalan</a>
</body>

</html>

И это файл buttons.css: 

.shiny-btn {
    cursor: pointer;
    text-align:center;
    width: 15em;
    padding: .5em;
    color: #ffffff;
    text-shadow: 1px 1px 1px #000;
    border: solid thin #882d13;
    -webkit-border-radius: .7em;
    -moz-border-radius: .7em;
    border-radius: .7em;
    -webkit-box-shadow: 2px 2px 3px #999; 
    box-shadow: 2px 2px 2px #bbb;
    background-color: #ce401c;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e9ede8), to(#ce401c),color-stop(0.4, #8c1b0b));
}

.shiny-btn.clicked {
    background-color:gray;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7) inset;
}

Я уверен, что у меня есть значение в var language.Но когда я делаю это: $(language).removeClass("shiny-btn").addClass("shiny-btn clicked"); ничего не меняется.

Знаете почему?

Ответы [ 4 ]

3 голосов
/ 27 мая 2011

сначала измените CSS (не обязательно) 

.clicked {
    background-color:gray;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7) inset;
}

, затем попробуйте с этим 

$('a').live ('click hover mouseover', function() {
    var lang = $(this).id;
    $('#'+lang).addClass("clicked");
 },
   function() {  
    $(this).removeClass("clicked");
});

см. здесь четко указано:

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

2 голосов
/ 27 мая 2011

используйте только $ (язык) .addClass ("нажал")

1 голос
/ 27 мая 2011

Насколько я понимаю, вам нужно всего лишь добавить класс "clicked".JQuery должен хорошо с этим справляться: 

$("#"+language).addClass("clicked");

Редактировать: Как указал diEcho, язык, по-видимому, является строкой.Поэтому требуется селектор идентификаторов.

1 голос
/ 27 мая 2011 
.shiny-btn.clicked { ... }

это представляет 2 класса, shiny-btn и clicked, поэтому вам нужно иметь 

<html_element class="shiny-btn">
    <html_element class="clicked"> ... </html_element>
</html_element>

что вы, вероятно, хотите - это наследовать весь предыдущий класс и переопределить классом clicked

.shiny-btn {        
    /* default properties */
}

.clicked {
    background-color:gray;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7) inset;
}

.selected {
    /* add here your selected style */
 }

, а затем просто используйте: 

// make a fancy hover on buttons
$(".shiny-btn").hover( 
    function() {  // on mouseover
        $(this).addClass("clicked");
    }, 
    function() {  // on mouseout
        $(this).removeClass("clicked");
    });

// add .selected class to the correct language
$("#" + language).addClass("selected");
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...