多个元素 -> 一个功能，而元素不相互碰撞答案

【问题标题】：Multiple elements -> one function while the elements do not colide with each other多个元素 -> 一个功能，而元素不相互碰撞
【发布时间】：2020-05-10 05:15:07
【问题描述】：

我在不同的图片幻灯片上有多个选择标签，但在同一页面上。每张幻灯片都有一组选择标签，我希望用户只选择一个选择标签。我已经编写了代码来执行此操作，但我想知道是否还有其他方法。所以，基本上我想要：

幻灯片 1 w。 selectiontags1：选择 1 个 selectiontag（共 4 个）
Slide2 w.selectiontags2：选择 1 个选择标签
幻灯片 3 w。 selectiontags3：选择 1 个 selectiontag
幻灯片 4 w。 selectiontags4：选择 1 个 selectiontag

这是我目前的代码。

var prevSelectedValue = null;
var prevSelectedValue2 = null;
var prevSelectedValue3 = null;
var prevSelectedValue4 = null;


$w.onReady(function () {
    //TODO: write your page related code here...
    let tags = $w('#selectionTags1');
    if (tags.value.length === 1) {
        prevSelectedValue = tags.value[0];
    } else if (tags.value.length > 1) {
        tags.value = [];
    }
    let tags2 = $w('#selectionTags2');
    if (tags2.value.length === 1) {
        prevSelectedValue2 = tags2.value[0];
    } else if (tags2.value.length > 1) {
        tags2.value = [];
    }
    let tags3 = $w('#selectionTags3');
    if (tags3.value.length === 1) {
        prevSelectedValue3 = tags3.value[0];
    } else if (tags3.value.length > 1) {
        tags3.value = [];
    }
    let tags4 = $w('#selectionTags4');
    if (tags4.value.length === 1) {
        prevSelectedValue4 = tags4.value[0];
    } else if (tags4.value.length > 1) {
        tags4.value = [];
    }
});

export function selectionTags1_change(event) {
    //Add your code for this event here: 
    if (!event.target.value || event.target.value.length === 0) {
        event.target.value = [prevSelectedValue];
    } else {
        event.target.value = event.target.value.filter(x => x !== prevSelectedValue);
        prevSelectedValue = event.target.value[0];
    }
}

export function selectionTags2_change(event) {
    //Add your code for this event here:
    if (!event.target.value || event.target.value.length === 0) {
        event.target.value = [prevSelectedValue2];
    } else {
        event.target.value = event.target.value.filter(x => x !== prevSelectedValue2);
        prevSelectedValue2 = event.target.value[0];
    } 
}
export function selectionTags3_change(event) {

    //Add your code for this event here: 
    if (!event.target.value || event.target.value.length === 0) {
        event.target.value = [prevSelectedValue3];
    } else {
        event.target.value = event.target.value.filter(x => x !== prevSelectedValue3);
        prevSelectedValue3 = event.target.value[0];
    } 
}

export function selectionTags4_change(event) {
    //Add your code for this event here: 
    if (!event.target.value || event.target.value.length === 0) {
        event.target.value = [prevSelectedValue4];
    } else {
        event.target.value = event.target.value.filter(x => x !== prevSelectedValue4);
        prevSelectedValue4 = event.target.value[0];
    } 
}

【问题讨论】：

标签： javascript arrays function velo

【解决方案1】：

只是一些有助于清理代码的注释：

最好使用event.target.value[event.target.value.length-1] 而不是.filter()。虽然由于我们的数组非常小，因此不会产生很大的性能差异，但我们知道最近选择的项是数组中的最后一项，因此使用length-1 是更高效的代码。
最好操作选择器而不是事件，所以我建议将event.target.value = event.target.value.filter... 替换为$w('#selectionTags2') = event.target.value[....。这也将使您的代码更具可读性，因为您知道哪个元素正在更新。
如果您没有将任何内容预加载到 $w('#selectionTags') 值数组中，我不确定您的 onReady 函数中的代码是否必要（除非我错过了填充该选择值数组的步骤）。

【讨论】：