javascript - 如何重构这个 NativeScript 简单图像 css 交换器

Question

我有一个显示 3 张图片的页面，用户应该点击其中一张，然后点击“下一步”按钮继续。

基本上，我只是在点击图像时向图像添加一些 CSS。

但是...我的代码很丑陋，并且不跟踪他们是否已经选择了一个。

 onPlanTap: function (args) {
        const planImage = args.object;
        const planImageSrc = planImage.src;
        const planId = plan.id;

        this.set("nextButtonOn", true);

        var n = planImageSrc.search("off");

        // Found, it is off - turn on
        if (n > 0) {
            var newOnSrc = planId + "-off.png";
            planImage.src = newOnSrc;
            this.set("currentPlan",planId);
            FancyAlertService.showFancySuccess("Plan Secected!", "You have chosen the FREE plan.", "Ok");
        }
        else {
            // It's already on, turn off
            var newOnSrc = planId + "-on.png";
            planImage.src = newOnSrc;
            this.set("currentPlan","");
        }

    }

[哦，我添加的css，只是给图片添加了一个粗白边框]

我不知道如何只选择一个。

我是否缺少 NS 中的某种“切换”功能，或者我必须自己编写逻辑吗？如果是这样的话，谁能给我一些代码？

Answer 1

将您的图像包裹在一些自定义对象中。

class MyImage {

image;
isSelected:boolean;
}

添加数据绑定(bind):

<ListView [items]="myDataItems" class="list-group">
    <ng-template let-item="item" let-i="index">
        <Image (tap)="selectImage(item)" class="item.isSelected ? styleA : styleB"></Image>
    </ng-template>
</ListView>

在你的组件文件中:

class MyComponent {
    myDataItems: Array<MyImage>

    selectImage(item: MyImage) {
        //deselect all Items
        //select this item
    }
}