jquery - 为 addclass 创建绑定处理程序

Question

如何创建一个绑定处理程序，将类添加到 div

<div class="control-group" id ="nameControlGroup">
    <label>Name</label>
    <div class="controls">
        <input type="text" data-bind="value:scheduleClause">
    </div>
</div> 
<div class="control-group">                 
    <div class="controls">
        <button class="btn btn-primary" data-bind = "click:addScheduleClause">Save</button>
    </div>
</div>    

我需要一个绑定处理程序，以便每次单击按钮时都会向 nameControlGroup div 添加一个类

Answer 1

您应该在 ViewModel 中创建一个 CssClass 可观察属性，并在 addScheduleClause 方法中更新它：

function ViewModel() {
    var self = this;
    self.CssClass = ko.observable();

    self.addScheduleClause = function() {
       self.CssClass("CSS CLASS");
    }
}

在 html 部分中，您应该为 div nameControlGroup 添加绑定：

<div class="control-group" id ="nameControlGroup" data-bind="css: CssClass">
    <label>Name</label>
    <div class="controls">
        <input type="text" data-bind="value: Name">
    </div>
</div> 

Answer 2

像这样使用：

document.getElementsByClassName('btn').addEventListener("click",function(){

    document.getElementById('nameControlGroup').setAttribute("class", "your_class_to_add");

});

Answer 3

假设您使用此按钮：

<button class="btn btn-primary" data-bind = "click:addScheduleClause">Save</button>

然后在您的“addScheduleClause”函数中添加一行代码

$('#nameControlGroup').addClass('newClassName');

我认为为此制作绑定处理程序不是一个好主意。但是如果你坚持（这样的事情应该有效）：

ko.bindingHandlers.myspecialbutton = {
  init: function (element, valueAccessor){
    $(element).on('change', function(event){
      $('#nameControlGroup').addClass('newClassName');
    });
  }
};

或者更好的是，亚历山大写的。

Answer 4

这应该作为 jQuery 解决方案工作：

jQuery(document).ready(function(){
     jQuery('button').click(function(){
        jQuery('#nameControlGroup').addClass('YOUR CLASS NAME');
     });
});