Добавление className к телу на mouseevent происходит несколько раз? - PullRequest
Новая
       15

Добавление className к телу на mouseevent происходит несколько раз?

0 голосов
/ 13 июня 2011

Я добавляю дополнительное имя className к тегу body, однако className добавляется несколько раз ... некоторая помощь в том, как избежать этого, будет очень кстати!

Спасибо 

<html>
<head>

<style type="text/css">
.defaultText {
font-size:100%;
}
.myNewClass {
font-size:150%;
color:red;
}
</style>

<script type="text/javascript">
<!--

var state;

window.onload=function() {

obj=document.getElementsByTagName('body')[0];
state=(state==null)?' defaultText':state;
obj.className+=state;

document.getElementById('addClass').onclick=function() {
obj.className+=(obj.className==' myNewClass')?' defaultText':' myNewClass';
state=obj.className;
}
}

-->
</script>

</head>

<body class="thisClassMustStay">

<div>My text here</div><br />
<a href='#' id="addClass">toggle class</a></div>

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 13 июня 2011 
> var state;
> 
> window.onload=function() {
> 
>   obj = document.getElementsByTagName('body')[0];
>   state = (state == null)? ' defaultText' : state;

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

  state = state? ' defaultText' : state;

Учитывая, что при первом запуске выражение будет иметь значение true, тогда состояние будет установлено на ' defaultText'.Обратите внимание, что в начале строки есть пробел.В некоторых браузерах это пространство будет удалено, а в других оно будет сохранено, поэтому гораздо лучше удалить его. 

>   obj.className += state;

На этом этапе «defaultText» будет добавлен в список классов наэлемент тела.Опять же, могут быть проблемы с начальными пробелами, которые лучше всего решаются с помощью надежных функций hasClass, addClass и removeClass (их не особенно сложно написать). 

> 
>   document.getElementById('addClass').onclick = function() {
>     obj.className += (obj.className == ' myNewClass')? ' defaultText' :
>                                                        ' myNewClass';

С функциями, предложенными выше, это может быть:

  if (hasClassname(obj, 'myNewClass')) {
    addClassname(obj, 'defaultText') ;
  } else {
    addClassname(obj, 'myNewClass') ;
  }

. 

state = obj.className;

}}

Если вам нужна помощь с функциями has / add / removeClassname, просто спросите.

0 голосов
/ 13 июня 2011

Я использую эту функцию (для сайтов, где у меня нет jQuery). 

function addClass(element, className)
{
    // Split the classes
    var classes = element.className.split(' ');
    // Remove class if it exists (to force the added class to be added at the end).
    index = classes.indexOf(className);
    if (index > -1)
    {
        classes.splice(index, 1);
    }
    // Add class.
    classes.push(className);
    element.className = classes.join(' ');
}

Другим решением будет оставить глобальный объект для запоминания, если вы добавили класс, или написать функциюпроверить это: 

function hasClass(element, className)
{
    var classes = element.className.split(' ');
    index = classes.indexOf(className);
    return index > -1;
}
...