Question

如果有人可以提供帮助，我会感到高兴=）我希望我的图像在我点击时改变

.html文件：

<a href="#" data-bind="click: $root.markCompleted"><img class = "check" src = 'bee-icon-gray.jpg' width = '25px' height = '23px'/></a>

.js文件

    function AppViewModel() {
            var self = this;
            self.tasks = ko.observableArray([]);

      self.markCompleted = function(task) {
                task.status('completed');
                }
}

所以当我点击它时，我想用bee-icon-gray.jpg替换bee-icon-colored.jpg图像，如果我每次点击都可以切换图像，那将是完美的！我会感激任何帮助！

Answer 1

在普通的网页中，确实使用jquery选择器是最好的，但是因为你正在使用挖空建立一个SPA，所以在视图模型中混合jquery选择是禁止的。

所以，结束回应：

<a href="#" data-bind="click: $root.markCompleted"><img class = "check" data-bind='attr: {src: imageSrc}' width = '25px' height = '23px'/></a>

并在您的视图模型中：

function AppViewModel() {
    var self = this;
    self.imageSrc = 'initialImage';
    self.tasks = ko.observableArray([]);
    self.markCompleted = function(task) {
        task.status('completed');
        self.imageSrc('newImage');
    }
}

Answer 2

尝试使用以下代码，它可以帮助您。

 $('.check').click(function(){
      $(this).attr('src','newimagesrc');
    });

如何在点击时替换图像，Knockout？

2 个答案: