javascript - JS - 样式更改问题

Question

我的脚本有问题，它意味着如果进入ELSE，则显示一个按钮，这意味着如果找不到季集名称，则显示该按钮，但由于某种原因，它总是显示它一旦我改变了标签的值。它仅在无法找到的值时才显示。

JS:

function season1episodesChange() {

    var s1_episodes = JSON.parse(document.getElementById('s1_episodes').value);

    var selectseason1episode = document.getElementById('selectseason1episode');

    for (var i = 1; i <= s1_episodes.length; i++){
        if (selectseason1episode.value == s1_episodes[i - 1]){
            document.getElementById('season1episode' + i).style.display = 'inline-block';
        } else {
            document.getElementById(['season1episode' + i].join('')).style.display = 'none';
            document.getElementById('notuploadedyet').style.display = 'inline-block';
        }
    }

}

更新:

尝试添加:

document.getElementById('notuploadedyet').style.display = 'none';

在 if {} 位中，但现在它似乎仅在位于最后一个值或第一个值时隐藏，它将打开并在所有其他值中保持打开状态。

Answer 1

经讨论，逻辑是:

循环遍历可能的选项值，然后:

1. 隐藏所有不匹配的元素。
2. 如果没有元素匹配，则显示 notuploaded 按钮。
3. 如果元素匹配，则显示该剧集(如果存在)，否则，显示 notupload 按钮，因此代码可以是:

function season3episodesChange() {
    var s1_episodes = JSON.parse(document.getElementById('s1_episodes').value);
    var selectseason3episode = document.getElementById('selectseason3episode');

    //Setup the Flag.
    var notuploaded = true;
    var targetEle;

    for (var i = 1; i <= s1_episodes.length; i++){
        // Get the element to show first.
        targetEle = document.getElementById('season3episode' + i);

        // Only check match if the element to match exist
        // So even if it match, it won't see notuploaded to false.
        if (targetEle !== null) {
           if (selectseason3episode.value == s1_episodes[i - 1]){
                document.getElementById('season3episode' + i).style.display = 'inline-block';

                // Hide the button when : there's exist an element which match the select.
                notuploaded = false;
            } else {
                // Hide the not matched but exist elements.
                document.getElementById(['season3episode' + i].join('')).style.display = 'none';
            }   
        }
    }

    //Using the flag decide to show the notuploaded button or not;
    document.getElementById('notuploadedyet').style.display = notuploaded ? 'inline-block' : 'none';
}