Функция JavaScript перестает работать, когда страница полностью загружена

Question

У меня есть сайт WordPress, и одна из функций начала работать. На моей странице повестки дня здесь: http://staging.chinahiking.cn/agenda/ Раньше, когда вы нажимали на вкладки, предстоящая поездка менялась. Я только сейчас понял, что это перестало работать, и я не уверен, почему. Что еще более странно, иногда я выполняю жесткое обновление, и когда страница все еще загружается и я нажимаю на вкладки, она снова работает, но когда страница полностью загружена, она перестает работать. Вот функция JS:

<?php get_header();
$cur_month = date('n');
$month = array(1=>"Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
$agenda = get_agenda_by_month();
?>

var $=function(objectId){
    if(document.getElementById&&document.getElementById(objectId)){
        return document.getElementById(objectId)
    }
    else if(document.all&&document.all(objectId)){
        return document.all(objectId)
    }
    else if(document.layers&&document.layers[objectId]){
        return document.layers[objectId];
    }
    else{
        return false;
    }
};
function tabTurn(presObj, classon, showdiv){
    var pObj = presObj.parentNode;
    var items = pObj.getElementsByTagName('li');

    for(var i=0; i<items.length; i++){
        var n = i + 1;
        var cntDiv = $('location_desc_' + n);
        if(items[i] == presObj){
            items[i].className=classon;
            cntDiv.className = showdiv;
        }
        else{
            items[i].className='off';
            cntDiv.className = 'undis';
        }
    }
};

А вот HTML:

  <div class="monthes">
            <div class="month_list">
                <ul class="month">
                <?php for($i=1; $i<=12; $i++){
                    if($i!=$cur_month)
                       echo "<li onclick=\"tabTurn(this, 'on', 'month_desc');\" class=\"off\">$month[$i]</li>";
                    else
                       echo "<li onclick=\"tabTurn(this, 'on', 'month_desc');\" class=\"on\">$month[$i]</li>";
                }?>
                </ul>
            </div>
        </div>
          <?php
                for($i=1; $i<=12; $i++):
                    if((isset($agenda[$i]))):
            ?>
            <div id="location_desc_<?php echo $i;?>" class="month_desc <?php if($i!=$cur_month) echo "undis";?>">

Кто-нибудь знает, почему это внезапно перестало бы работать? И только иногда работают, когда страница все еще загружается, но затем останавливаются, когда она полностью загружена?

Answer 1

Я не думаю, что вы используете JQuery правильно. Вы должны использовать функции addClass и removeClass.

Открыв devtools на вашем сайте, я могу изменить страницу, запустив:

$('#location_desc_6').addClass("undis")
$('#location_desc_8').removeClass("undis")

В качестве примечания, селекторы должны начинаться с #, если вы хотите выбирать элементы по идентификатору.

Если вы действительно хотите использовать className = whatever, вам нужно указать, что вы хотите запустить первый элемент, возвращаемый селектором, например:

$('#location_desc_6')[0].className = "undis"