如何通過 knockoutjs 從 html 獲取所有 css 類

Question

我在使用accordion選擇所有類並將它們帶入 knckoutjs 以與它們一起操作時遇到問題。

按照這個鏈接： 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 部分從上面的鏈接復制到我的解決方案並使其工作（展開每個矩形..）

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。 為此，我制作了一個簡單的自定義綁定，將點擊綁定應用於所有問題。 單擊綁定負責在單擊的問題上切換active的 class，並將其從同一容器中的所有其他問題中刪除。

這甚至不需要視圖 model 上的“擴展”可觀察對象之類的東西，因為它純粹通過 DOM 中的 CSS 類來保留其 state。