Question

我试图让计数器停在0并且当它完成时整个div都是不可点击/禁用交互。中间有一个链接。因此，当我点击3次时，我希望它不可点击。

编辑：它也不需要使用Knockout。任何方法，如果更简单就好了。

最好的方法是什么？

 var ClickCounterViewModel = function() {
     this.numberOfClicks = ko.observable(3);

     this.registerClick = function() {
         this.numberOfClicks(this.numberOfClicks() - 1);
     };

     this.hasClickedTooManyTimes = ko.computed(function() {
        return this.numberOfClicks() <= 0;
     }, this);
    };

 ko.applyBindings(new ClickCounterViewModel());

Answer 1

只需尝试添加此行

即可

if (this.numberOfClicks() > 0)

在

this.numberOfClicks(this.numberOfClicks() - 1);

我们会得到类似的东西：

var ClickCounterViewModel = function() {
    this.numberOfClicks = ko.observable(3);

    this.registerClick = function() {
        if (this.numberOfClicks() > 0)
            this.numberOfClicks(this.numberOfClicks() - 1);
    };

    this.hasClickedTooManyTimes = ko.computed(function() {
        return this.numberOfClicks() <= 0;
    }, this);
};

ko.applyBindings(new ClickCounterViewModel());

See Fiddle

Answer 2

有点晚了，但请看一下我的解决方案，因为我简化了很多代码，我认为你可以从中获得一些价值（例如使用var self = this这是最佳做法）。

我的解决方案背后的想法非常简单：

1）显示或隐藏与hasClickedTooManyTimes计算变量相关的链接或普通文本。

<a href="#" data-bind="ifnot: hasClickedTooManyTimes">empty link</a>
<p data-bind='if: hasClickedTooManyTimes'>empty link</p>

2）如果hasClickedTooManyTimes为真，只需阻止对div的点击。

self.registerClick = function() {
    if(!self.hasClickedTooManyTimes()){
        self.numberOfClicks(this.numberOfClicks() - 1);
    }
};

检查Fiddle！

请告诉我这是否对您有用！

Answer 3

只需在完成统计后停用链接：

首先在您的链接中添加id：

<a id="a1" href=#> <p>empty link</p> </a>

接下来，当你的javascript中的时间正确时，禁用该ID：

this.hasClickedTooManyTimes = ko.computed(function() {
    if (this.numberOfClicks() < 0) {
        $('#a1').attr('disabled', 'disabled');   // <--- disable it
    }
    return this.numberOfClicks() <= 0;
}, this);

Answer 4

看一下JS代码的小提琴，stackoverflow没有验证我的代码部分是否有JS内容。

HTML

<body>
    <div>You have <a href="#" id="mybtn">teste</a> clicks!</div>
    <div id="demo"></div>
</body>

JS

var btnObserver = (function() {
    var me= this;
    var clickleft = 3;

    var registerClick = function() {
        if(clickleft > 0) {
            clickleft--;
        }
    };

    var isCLickable = function() {
        console.log(clickleft);
        return clickleft !== 0;
    };

    return {
        registerClick: registerClick,
        isCLickable: isCLickable
    }    
})();

    document.getElementById("mybtn").addEventListener("click", function(){
        var message= "Hello World";
        btnObserver.registerClick();

        if(!btnObserver.isCLickable()) {
            message= "X  Blocked!";
            // return false or do anything you need here
        } 

        document.getElementById("demo").innerHTML = message;
    });

小提琴：http://jsfiddle.net/qkafjmdp/

停止增量计数器并禁用交互

4 个答案: