Javascript 多元素->；一个函数，而元素之间不共线

我在同一页的不同幻灯片上有多个SelectionTag。每张幻灯片都有一组selectiontag，我希望用户只选择1个selectiontag。我已经编写了实现这一点的代码，但我想知道是否还有其他方法。 所以，基本上我想要：

• 幻灯片1 w。selectiontags1：选择1个selectiontag（共4个）
• 幻灯片2 w.selectiontags2：选择1个selectiontag
• 幻灯片3 w。selectiontags3：选择1个selectiontag
• 幻灯片4 w。SelectionTags 4：选择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];
    } 
}

---

只需几条注释就可以帮助清理代码：

• 最好使用

  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函数中的代码是否有必要（除非我缺少填充该选择值数组的步骤）