Удаление класса через 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. |