无法读取未定义的属性“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);    },

Answer 1

设置属性https://api.jquery.com/attr/有attratjquery 方法。

同样var $currQuestion = $accordionToggles.eq(i), $currAnswer = $currQuestion.closest('dt').next('dd')在这里，您将问题声明为单个元素，并将答案作为数组，因此您必须添加eq(0)到$currQuestion.closest('dt').next('dd')，或者遍历所有 el2 项目以设置属性。

当您包装dd到其他标签divs时，jquerynext()无法在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/