javascript - 如何在点击时替换图像，淘汰赛？

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');
    });