Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Действия с DIV2 и DIV1 при onclick на DIV1 (https://javascript.ru/forum/jquery/54349-dejjstviya-s-div2-i-div1-pri-onclick-na-div1.html)

alecto 14.03.2015 01:27

Действия с DIV2 и DIV1 при onclick на DIV1
 
есть DIV1 - кнопка и DIV2 - блок, который надо показывать/скрывать + надо менять классы vk_comments_inactive, vk_comments_active для смены изображения кнопки

черновой код DIV1 onclick следующий:
<div id="vk_chat_button" class="vk_comments_inactive" onclick="toggle_visibility('vk_comments_wrap');$(this).removeClass('vk_comments_inactive').addClass('vk_comments_active');" >chat</div>


работающая функция, которая прячет/показывает DIV2, здесь все в порядке:
function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }


помогите в этот код правильно прописать смену классов vk_comments_inactive, vk_comments_active по toggle для DIV1, опять к ночь, опять начинаю тупить, не хватает примеров и ничего не получается.

alecto 14.03.2015 02:17

нашел пример для второй части, со сменой классов
http://jsfiddle.net/toddmotto/6UwF3/

получилось так
<div id="vk_chat_button" class="vk_comments_inactive" onclick="toggle_visibility('vk_comments_wrap'); $(this).toggleClass(this, 'vk_comments_active');" ></div>


function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }


function toggleClass(elem, className) {
	var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, " " ) + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(" " + className + " ") >= 0 ) {
            newClass = newClass.replace( " " + className + " " , " " );
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
    } else {
        elem.className += ' ' + className;
    }
}


но, все равно не работает, постоянно меняет на неактивный класс.
помогите победить этот код.

laimas 14.03.2015 04:49

$(this) - это jQuery, .toggleClass() - ее метод изменяющий класс/классы, и синтаксис его такой.
Вы же по методу пытаетесь вызвать функцию, которая совсем не нужна. Подключили jQuery, значит используйте, выбросив и вот это onclick="toggle_visibility('vk_comments_wrap');.

alecto 14.03.2015 08:50

нет, jquery не получится использовать, он подключается позже.
потому все функции и сделаны в javascript.
с jquery все было бы проще для меня.
пробовал
onclick="toggle_visibility('vk_comments_wrap'); toggleClass(this, 'vk_comments_active');"
так тоже не работает.

alecto 14.03.2015 09:16

laimas, спасибо, натолкнули на решение.

onclick="toggle_visibility('vk_comments_wrap'); toggleClass(this);"


function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }


function toggleClass(div){
var className=div.getAttribute("class")
if(className=="vk_comments_active"){
div.className="vk_comments_inactive"
}
else{
div.className="vk_comments_active"
}
}

вот так вроде получилось


Часовой пояс GMT +3, время: 11:22.