无法读取未定义的属性 'setAttribute'

Question

我正在尝试使用以下代码创建手风琴。如果将以下标签放在一起，则其工作正常。我想在页面其他部分的某个标记内插入元素

     <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>

Answer 1

jquery 处有 attr 方法用于设置属性 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的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);

工作fiddlehttps://jsfiddle.net/w7gpLrse/

无法读取未定义的属性 'setAttribute'

Cannot read property 'setAttribute' of undefined

html

javascript

jquery

accordion

无法读取未定义的 属性 'setAttribute'

Cannot read property 'setAttribute' of undefined

html

javascript

jquery

accordion

无法读取未定义的属性 'setAttribute'