时间戳

首页 > 解决方案 > 使用 Knockout 在不同的 div 上单击添加/删除类到元素

knockout.js - 使用 Knockout 在不同的 div 上单击添加/删除类到元素

问题描述

html

<body>

  <header>
    <a href="#" id="toggle-button">
      <img src="img/menu_icon.svg">
    </a>
  </header>

  <main id="wrapper">

    <aside id="sidebar-wrapper">
      <div></div>
    </aside>

    <section id="page-content-wrapper">
      <div id="map"></div>
    </section>

  </main>

</body>

我不知道如何使用 Knockout 获得相同的结果描述如下

jQuery

$('#toggle-button').click(function(event){
  event.preventDefault();
  $("img", this).toggleClass('rotated');
  $('#wrapper').toggleClass('menu--visible');
});

我正在使用 css 绑定，但不知道如何将类添加到 #toggle-button 以外的其他元素，就像我在 这里所做的那样。有什么想法/材料/文档可以帮助我吗？

标签： knockout.js

解决方案

您可以使用一个observable来切换 和 的img类#wrapper。你只需要在每次点击时切换 observable 的值。使用css绑定根据 observable 的值应用和删除类。

var viewModel = {
toggle : ko.observable(false)
}

ko.applyBindings(viewModel);
.rotated{
transform: rotate(90deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<body>

  <header>
    <a href="#" id="toggle-button" data-bind="click:function(){toggle(!toggle())}">
      <img src="https://cdn.xl.thumbs.canstockphoto.com/canstock33334848.jpg" data-bind="css: {rotated : toggle() }">
    </a>
  </header>

  <main id="wrapper" data-bind="css: {'menu-visible' : toggle() }">

    <aside id="sidebar-wrapper">
      <div></div>
    </aside>

    <section id="page-content-wrapper">
      <div id="map"></div>
    </section>

  </main>

</body>

推荐阅读