Удаление класса через find js/jq
Доброго времени суток друзья! Есть функция позволяющая отлавливать правый клик мыши по элементу, она берет элемент по которому был осуществлен клик, находит в следующем после него контейнер span и с помощью внутренней функции find ищет div с классом hadden_menu_dao
и меняет его на hadden_menu_dao_show. Вопрос: как заставить интерпретатор заменить класс у блока найденного с помощью find? т.к. в примере при замене класса в консоль приходит undefined. $(function() { $("ul").on("contextmenu", "a.a", function(event) { event.preventDefault(); // получаем текущий элемент по которому был проезведен клик var target = event.target; // console.log(target); var link_html = target.innerHTML; // ищем div с классом у рядом стоящего элемента var asd = $(this).next('.redact').find($(".hadden_menu_dao")); // console.log(asd); // осуществляем проверку на наличие класса (заменяем класс при его наличии) if($('div').is('.hadden_menu_dao_show')) { var articles = document.getElementsByClassName('hadden_menu_dao_show'); articles.classList.remove("hadden_menu_dao_show"); articles.classList.add("hadden_menu_dao"); }; // удаление класса "hadden_menu_dao" asd.classList.remove("hadden_menu_dao"); // добавление элементу класс "hadden_menu_dao_show" asd.classList.add("hadden_menu_dao_show"); return false; }) }); <ul id="id" class="display_set"> <li> <a href="№" title="№" class="a">link1</a> <span class="redact" id="1"> <div class="hadden_menu_dao"> </div> </span> </li> <li> <a href="№" title="№" class="a">link2</a> <span class="redact" id="2"> <div class="hadden_menu_dao"> </div> </span> </li> <li> <a href="№" title="№" class="a">link3</a> <span class="redact" id="3"> <div class="hadden_menu_dao"> </div> </span> </li> <li> <a href="№" title="№" class="a">link4</a> <span class="redact" id="4"> <div class="hadden_menu_dao"> </div> </span> </li> </ul> |
aston,
для данной структуры достаточно менять класс только у самой ссылки и у обьектов jquery нет метода classList |
aston,
у getElementsByClassName тоже нет метода classList!!! |
aston,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .hadden_menu_dao { display: none; } a.open + .redact .hadden_menu_dao { display: block; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $("ul").on("contextmenu", "a.a", function(event) { event.preventDefault(); $(this).addClass("open") }) }); </script> </head> <body> <ul id="id" class="display_set"> <li> <a href="№" title="№" class="a">link1</a> <span class="redact" id="1"> <div class="hadden_menu_dao"> всякая фигня </div> </span> </li> <li> <a href="№" title="№" class="a">link2</a> <span class="redact" id="2"> <div class="hadden_menu_dao"> всякая фигня </div> </span> </li> <li> <a href="№" title="№" class="a">link3</a> <span class="redact" id="3"> <div class="hadden_menu_dao"> всякая фигня </div> </span> </li> <li> <a href="№" title="№" class="a">link4</a> <span class="redact" id="4"> <div class="hadden_menu_dao"> всякая фигня </div> </span> </li> </ul> </body> </html> |
Спасибо Рони! Подскажи пожалуйста, как проверить на существование селектора с определенным классом и если результат true заменить его.
пробовал так: function function_dffg () { if($("div").hasClass("hadden_menu_dao_show")) { var argument = $("div").hasClass("hadden_menu_dao_show"); console.log(argument); argument.classList.remove('hadden_menu_dao'); argument.classList.add('hadden_menu_dao_show'); }; }; function_dffg(); не получается :no: |
aston,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .hadden_menu_dao { display: none; } .hadden_menu_dao_show { display: block; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $("ul").on("contextmenu", "a.a", function(event) { event.preventDefault(); var asd = $(this).next('.redact').children(); //if(asd.is(".hadden_menu_dao")) {asd.addClass("hadden_menu_dao_show").removeClass("hadden_menu_dao"); } asd.toggleClass("hadden_menu_dao hadden_menu_dao_show"); }) }); </script> </head> <body> <ul id="id" class="display_set"> <li> <a href="№" title="№" class="a">link1</a> <span class="redact" id="1"> <div class="hadden_menu_dao"> всякая фигня </div> </span> </li> <li> <a href="№" title="№" class="a">link2</a> <span class="redact" id="2"> <div class="hadden_menu_dao"> всякая фигня </div> </span> </li> <li> <a href="№" title="№" class="a">link3</a> <span class="redact" id="3"> <div class="hadden_menu_dao"> всякая фигня </div> </span> </li> <li> <a href="№" title="№" class="a">link4</a> <span class="redact" id="4"> <div class="hadden_menu_dao"> всякая фигня </div> </span> </li> </ul> </body> </html> |
Рони, дело в том, что мне надо заменеть класс у ранее открытого блока при нажатии правой кнопкой мыши на другую ссылку. Я ни как не могу получить еще один объект на подобие того, что приходит в функцию как asd/this. :yes:
if(asd.is(".hadden_menu_dao_show")) { asd.addClass("hadden_menu_dao").removeClass("hadden_menu_dao_show"); } в представленной функции, проверка идет непосредственно у элемента пришедшего по событию rightclick, возможно ли получить объект с уже открытым блоком и заменить там класс. |
aston,
не понимаю, сделайте выборку всех отрытых блоков $(".hadden_menu_dao_show") и делайте что хотите. |
Разобрался, делаю так:
$(function() { $("ul").on("contextmenu", "a.a", function(event) { event.preventDefault(); // получаем текущий элемент по которому был проезведен клик var target = event.target; // console.log(target); var link_html = target.innerHTML; // ищем div с классом у рядом стоящего элемента var asd = $(this).next('.redact').find($(".hadden_menu_dao")); // console.log(asd); if($("div").is(".hadden_menu_dao_show")) { $("div.hadden_menu_dao_show").removeClass("hadden_menu_dao_show").addClass("hadden_menu_dao"); } asd.toggleClass("hadden_menu_dao hadden_menu_dao_show"); // asd.removeClass("hadden_menu_dao"); // asd.addClass("hadden_menu_dao_show"); if (document.getElementById('daoX2')) { document.getElementById('daoX2').removeAttribute('id'); }; $(this).attr('id','daoX2'); return false; }) }); Рони, спасибо вам огромное!:thanks: |
Цитата:
|
Часовой пояс GMT +3, время: 11:26. |