如何通过 knockoutjs 从 html 获取所有 css 类

Question

我在 select 使用 accordion 处理所有类并将它们放入 knckoutjs 中进行操作时遇到问题。

关注此 link：https://wpbeaches.com/create-expandcollapse-faq-accordion-collapse-click/ 我设法创建了漂亮的可扩展对象（矩形），但它们“死了”，因为我使用的是 knockotjs，而不是 JS。所以我的问题是如何让它发挥作用？第一步是我不能 select 全部 accordion 类出于某种原因..这是我的代码：

define(['viewmodels/shell', 'durandal/services/logger', 'mediator-js', 'knockout', 'toastr'],
    function (shell, logger, mediator, ko, toastr) {
        var vm = {
            shell: shell,
            activate: activate,
            mediator: mediator
        }
            
        function activate() {
            var acc = jQuery.getElementsByClassName("accordion");
            var panel = document.getElementsByClassName('panel');

            for (var i = 0; i < acc.length; i++) {
                acc[i].onclick = function () {
                    var setClasses = !this.classList.contains('active');
                    setClass(acc, 'active', 'remove');
                    setClass(panel, 'show', 'remove');

                    if (setClasses) {
                        this.classList.toggle("active");
                        this.nextElementSibling.classList.toggle("show");
                    }
                }
            }

            function setClass(els, className, fnName) {
                for (var i = 0; i < els.length; i++) {
                    els[i].classList[fnName](className);
                }
            }
            return true;
        }

        return vm;
    });

我实际上尝试的是将 js 部分从上面的 link 复制到我的解决方案并使其工作（展开每个矩形..）

Answer 1

我不太清楚您要做什么，但您代码中的迹象表明您正在尝试做错事。

这是我能想到的使用 Knockout 和（为方便起见）jQuery 的最简单的手风琴式功能类型，直接从您提供的示例页面中获取问题和答案。

您总是可以通过添加动画等方式变得更加复杂。但最终，它是关于跨元素列表管理单个 CSS class。

ko.bindingHandlers.cssExclusive = {
  init: (element, valueAccessor) => {
    ko.applyBindingsToNode(element, {
      click: () => {
        var config = ko.unwrap(valueAccessor());
        $(element).closest(config.within).children().not(element).removeClass(config.class);
        $(element).toggleClass(config.class);
      }
    });
  }
};

const data = {
  sections: [
    {name: "FAQs", items: [
      {q: "What currency is the course charged in?", a: "The course is charged in Australian dollars."},
      {q: "What if the course doesn’t help me?", a: "If it doesn't help you I'll refund the purchase price in full."},
      {q: "When will the webinars take place?", a: "Depending on the mix of countries and time zones for people attending the webinars, I will pick a time that works best for most participants. All webinars will be recorded so you can listen to them again. The private Facebook group will obviously be available 24/7 and I’ll be monitoring and contributing to the discussion regularly."},
      {q: "What is the self-directed mentoring program?", a: "The self-directed mentoring program is designed to help you set-up and run an effective mentee-mentor relationship as part of the course."},
    ]}
  ]
};

ko.applyBindings(data);

.accordion {
  cursor: pointer;
}
.panel {
  display: none;
}
.accordion.active {
  color: blue;
}
.accordion.active + .panel {
  display: block;
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div data-bind="foreach: sections">
  <h3 data-bind="text: name"></h3>
  <div data-bind="foreach: items">
    <p class="accordion" data-bind="cssExclusive: {class: 'active', within: 'div'}">
      <span data-bind="text: 'Q' + ($index() + 1) + '.'"></span>
      <span data-bind="text: q"></span>
    </p>
    <div class="panel">A. <span data-bind="text: a"></span></div>
  </div>
</div>

我不能说你会如何将它集成到你的示例代码中，但也许你可以从中汲取一些灵感。

核心功能是在点击元素时切换 CSS class。为此，我对所有问题做了一个简单的custom binding that applies the click binding。单击绑定负责切换单击问题上的 active class，并将其从同一容器中的所有其他问题中删除。

这甚至不需要视图模型上的“扩展”可观察对象之类的东西，因为它纯粹通过 CSS classes 在 DOM.[=15 中保持其状态=]

如何通过 knockoutjs 从 html 获取所有 css 类

How to get all css classes from html, through knockoutjs

javascript

html

twitter-bootstrap

knockout.js