Невозможно прочитать свойство setAttribute из undefined - PullRequest
Новая
       48

Невозможно прочитать свойство setAttribute из undefined

0 голосов
/ 21 июня 2020

Я пытаюсь создать аккордеон, используя приведенный ниже код. Если ниже теги размещены вместе, все работает нормально. Я хочу вставить элемент в какой-нибудь тег в другой части страницы 

     <dt>
     <li class="nav-item"   id='l1' >
     <a class="nav-link active js-accordionTrigger"   href="#accordion1" aria-expanded="false" aria- 
     controls="accordion1">
     <i class="material-icons">camera</i>
      Studio
      </a>
      </li></dt>

        <dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true">
            <p>Lorem ipsum doplacerat. Cras justo purus,enim sit amet varius. Pellentesque justo dui, 
          sodales quis luctus a, iaculis eget mauris.</p>
           </dd>

Если я попытаюсь разместить здесь тег. Он не работает, я вижу ошибку setAttribute undefined 

         <div class="tab-content tab-space">
        <div class="tab-pane active text-center gallery" >
         <dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true">
            <p>Lorem iet mauris.</p>
           </dd> 
         </div>
        </div>

Вот коды Javascript и Jquery 

   <script>
   $(document).ready(function () {

  var d = document,
    $accordionToggles = $('.js-accordionTrigger'),
    touchSupported = ('ontouchstart' in window),
    pointerSupported = ('pointerdown' in window),

    skipClickDelay = function (e) {
        e.preventDefault();
        e.target.click();
    },

    setAriaAttr = function (el, ariaType, newProperty) {
        el[0].setAttribute(ariaType, newProperty);
    },

    setAccordionAria = function (el1, el2, expanded) {
        setAriaAttr(el1, 'aria-expanded', expanded ? true : false);
        setAriaAttr(el2, 'aria-expanded', expanded ? false : true);
    },

    switchAccordion = function (e) {
        e.preventDefault();

        var $this = $(this),
            $thisQuestion = $this,
            $thisAnswer = $this.closest('dt').next('dd'),
            // Check if the answer is in collapsed state
            isCollapsed = $thisAnswer.hasClass('is-collapsed');

        // Iterate over all the toggles and collaspse
        // them all and only toggle the current tab
        for (var i = 0; i < $accordionToggles.length; i++) {
            var $currQuestion = $accordionToggles.eq(i),
                $currAnswer = $currQuestion.closest('dt').next('dd');

            setAccordionAria($currQuestion, $currAnswer, false);

            $currQuestion.addClass('is-collapsed').removeClass('is-expanded');
            $currAnswer.addClass('is-collapsed').removeClass('is-expanded animateIn');
        }

        if (isCollapsed) {
            setAccordionAria($thisQuestion, $thisAnswer, true);

            $thisQuestion.addClass('is-expanded is-collapsed');
            $thisAnswer.addClass('is-expanded animateIn').removeClass('is-collapsed');
        }
    };

// Assign the click events using jQuery

if (touchSupported) {
    $accordionToggles.on('touchstart', skipClickDelay);
}
if (pointerSupported) {
    $accordionToggles.on('pointerdown', skipClickDelay);
}
$accordionToggles.on('click', switchAccordion);
    });

    </script>

1 Ответ

1 голос
/ 21 июня 2020

Существует метод attr в jquery для атрибута set https://api.jquery.com/attr/.

Также var $currQuestion = $accordionToggles.eq(i), $currAnswer = $currQuestion.closest('dt').next('dd') здесь вы объявляете вопрос как один элемент и отвечаете как массив, поэтому вам нужно либо добавить eq(0) к $currQuestion.closest('dt').next('dd'), либо перебрать все элементы el2 для настройки атрибутов.

Когда вы переносите dd в другие теги divs, jquery 's next() не могу найти dt рядом, поэтому ваш $currAnswer не определен, вам нужно использовать $currQuestion.closest('dt').next('.tab-content.tab-space').find('dd')

Решение: 

    setAriaAttr = function (el, ariaType, newProperty) {
        el.attr(ariaType, newProperty);
    },
    setAccordionAria = function (el1, el2, expanded) {
        setAriaAttr(el1, 'aria-expanded', expanded);
        setAriaAttr(el2, 'aria-expanded', !expanded);
    },

...
        for (var i = 0; i < $accordionToggles.length; i++) {
            var $currQuestion = $accordionToggles.eq(i),
                $currAnswer = $currQuestion.closest('dt').next('.tab-content.tab-space').find('dd').eq(0);

Рабочая скрипка https://jsfiddle.net/w7gpLrse/

...