Question

我目前正在创建一个向导。对于向导选项卡，可以处于3个状态“当前”，“已完成”，“即将到来”。

我想知道当html元素的状态发生变化时如何触发事件。

e.g。

<ul role="tablist">
    <li class="current">STEP 1</li>
    <li class="upcoming"> STEP2</li>
    <li class="upcoming">STEP 3</li>
    <li class="upcoming">STEP 4</li>
</ul>

例如，用户当前正处于STEP1状态。当用户点击step2时。 step1将其状态从“current”替换为“completed”，将第2步“即将”替换为“current”..

<li class="complete">STEP 1</li>
<li class="current"> STEP2</li>

等

因为我正在使用第三方js文件..每次将类添加到

元素时，我都不愿意通过800行代码创建触发器。那么当新类被添加到任何

时，如何触发事件或观察

我顺便使用knockoutjs，但我是新手。

视图模型

function CreateQuoteRequestViewModel(addresses, counterMessger) {


var _packageHeight = ko.observable("");
var _packageWidth = ko.observable("");
var _packageLength = ko.observable("");
var _packageVolume = ko.observable("");
var _packageWeight = ko.observable("");

function AddItemShowDisplay()
{
    $('#AddItem').animate({
        opacity: '1'
    },1000);

    _disableInputElement(false);
}
   .. other code

return {
     PackageHeight: _packageHeight,
    packageQuantity: _packageQuantity,
    PackageWidth: _packageWidth,
    PackageLength: _packageLength,
    PackageVolume: _packageVolume,
    packageWeight: _packageWeight,

   // and other code

}

调用viewModel

          var viewModel = new CreateQuoteRequestViewModel(array, counterMessger);  
        ko.applyBindings(viewModel);

Answer 1

您可以使用Mutation Observer来监视DOM元素的更改。

文档示例：

// select the target node
var target = document.querySelector('#some-id');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.log(mutation.type);
    });    
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);

// later, you can stop observing
observer.disconnect();

当一个新类被添加到列表中的任何<li>元素时，如何调用事件处理程序？</li>

1 个答案: