2

昨日、コードの効率改善について質問しました。今日、繰り返しのタスクを達成するためにコード行を少なくしようとするのと同じ精神で、別の質問があります。

次のコードがあります。

function myIntroductionText() {
    introPos.style.display = 'block';
    posOne.style.display = 'none';
    posTwo.style.display = 'none';
    posThree.style.display = 'none';
    posFour.style.display = 'none';
    posFive.style.display = 'none';
    posSix.style.display = 'none';
    posSeven.style.display = 'none';
    posEight.style.display = 'none';
    posNine.style.display = 'none';
    posTen.style.display = 'none';
    posEleven.style.display = 'none';
    backButton.style.visibility = 'hidden';
}

function myPositionOne() {
    introPos.style.display = 'none';
    posOne.style.display = 'block';
    posTwo.style.display = 'none';
    posThree.style.display = 'none';
    posFour.style.display = 'none';
    posFive.style.display = 'none';
    posSix.style.display = 'none';
    posSeven.style.display = 'none';
    posEight.style.display = 'none';
    posNine.style.display = 'none';
    posTen.style.display = 'none';
    posEleven.style.display = 'none';
    backButton.style.visibility = 'visible';
}

function myPositionTwo() {
    introPos.style.display = 'none';
    posOne.style.display = 'none';
    posTwo.style.display = 'block';
    posThree.style.display = 'none';
    posFour.style.display = 'none';
    posFive.style.display = 'none';
    posSix.style.display = 'none';
    posSeven.style.display = 'none';
    posEight.style.display = 'none';
    posNine.style.display = 'none';
    posTen.style.display = 'none';
    posEleven.style.display = 'none';
}

HTML は次のようになります。

<p class="textContent" id="introductionText">Introduction Text Goes Here</p>
                <p class="textContent" id="position1">content1</p>
                <p class="textContent" id="position2">content2</p>
                <p class="textContent" id="position3">content3</p>

各位置 (つまり、introPos、posOne、posTwo) には対応する関数もあり、基本的に上記の関数と同じように見えますが、位置に基づいて表示が変わる点が異なります。

このタスクをより効率的にするために、ループや if/else ステートメントを使用できると考えています。getElementsByClassName('textContent') を使用してみました。これにより、そのクラスのすべての要素を含む配列が生成されたと思います。console.log によると、[p#introductionText.textContent、p#position1.textContent など...] が含まれています。そこで、ループを試みるために次のコードを書きました。

var blanks = document.getElementsByClassName("textContent") // this creates the array that I mentioned
for (item in blanks) {
            if (blanks[0] === introductionText.textContent) {
                blanks[0].style.display = 'block';
            } else {
                blanks[item].style.display = 'block';
                }
        }

p#introductionText.textContent を使用してみましたが、エラーが返されました。私は JavaScript に非常に慣れていないので、ここで非常にばかげたことをしている可能性があることを十分に認識していますが、何か助けていただければ幸いです。

編集: エラー メッセージには Uncaught SyntaxError: Unexpected tocken ILLEGAL と表示されます

また、私の目標は、一度に 1 つの位置のみを表示することです。ユーザーがposOneからposTwo、posThreeなどに移動できるようにする「戻る」および「次へ」ボタンがあります。したがって、posTwo を表示するだけでなく、posOne や posThree を非表示にする必要もあります。

ありがとう！

4

3 に答える 3

2

最初に、これらすべての Javascript スタイル式を CSS に移行します。

#introPos, 
#posOne,
#posTwo, 
#posThree, 
#posFour, 
#posFive, 
#posSix, 
#posSeven, 
#posEight, 
#posNine, 
#posTen, 
#posEleven {
    display: none;
}

またはさらに短い

#introductionText>.textContent {
    display: none;
}

これにより、各関数を大幅に短縮できます。

function myPositionOne() {
    posOne.style.display = 'block';
    backButton.style.visibility = 'visible';
}

JS を使用して各スタイルを何度も設定する代わりに、変更するスタイルを設定するだけです。

次のステップは、これらすべての関数を、ターゲットとする要素のパラメーターを受け入れる関数に書き直すことです。

function myPosition(pos) {
    var parent = document.getElementById("text-container");
    var children = parent.getElementsByClassName("textContent");

     var element;
    // first hide all <p class="textContent"> children
    for (var i = 0; i < children.length; i++) {
        children[i].style.display = 'none';
        if (i == pos) {
          element = children[i];
        }
    }

    // then show the right one

    if (element) {
        element.style.display = 'block';
    }

    // show or hide the back button depending on which child we are dealing with
    if (pos > 0) {
        document.getElementById("backButton").style.visibility = 'visible';
    } else {
        document.getElementById("backButton").style.visibility = 'hidden';
    }
    if (pos >= children.length-1) {
        document.getElementById("nextButton").style.visibility = 'hidden';
    } else {
            document.getElementById("nextButton").style.visibility = 'visible';
    }
}

これは、子番号 #pos visible のみを設定し、戻るボタンの可視性を調整します (戻るボタンの ID が「backButton」であると仮定します)。

于 2016-01-22T15:46:31.233 に答える