Javascript-форум - Удаление класса через find js/jq

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Удаление класса через find js/jq (https://javascript.ru/forum/jquery/70819-udalenie-klassa-cherez-find-js-jq.html)

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

Цитата:

Сообщение от aston

делаю так:

ужас, но раз этот венигрет делает то что вам нужно, то ок!