0

少しJavaScriptを書きました。それは私の最初の 1 つであり、私はまだ学んでいます。行数を減らして効率化したい。オブジェクト指向プログラミングが私の最良の選択になると信じています。

スクリプトは、ホバー時にボタンにクラスを割り当てます。そのクラスの要素を取得し、さまざまな if 関数を実行して、画像ボタンの src 属性を変更する必要があるかどうかを判断します。このスクリプトは、別の画像の src 属性も同時に変更します。

if ステートメントのロジックを 1 つまたは 2 つに要約して、変数を使用して src 属性の変更を実行できるかどうか疑問に思っています。でも、どうしたらいいのかわからない…？

    //assign navButtons to var buttons (creates array)
var buttons = document.getElementsByClassName("navButton");

//set buttonHover function
function buttonOn(){
    if ( arrow == topArrow.mouseout ) {
        newArrow = document.getElementById("topArrow");
        newArrow.setAttribute("src", topArrow.mouseover);
        menuText.setAttribute("src", topArrow.text);
    }
    if ( arrow == rightArrow.mouseout ) {
        newArrow = document.getElementById("rightArrow");
        newArrow.setAttribute("src", rightArrow.mouseover);
        menuText.setAttribute("src", rightArrow.text);
    }
    if ( arrow == bottomArrow.mouseout ) {
        newArrow = document.getElementById("bottomArrow");
        newArrow.setAttribute("src", bottomArrow.mouseover);
        menuText.setAttribute("src", bottomArrow.text);
    }
    if ( arrow == leftArrow.mouseout ) {
        newArrow = document.getElementById("leftArrow");
        newArrow.setAttribute("src", leftArrow.mouseover);
        menuText.setAttribute("src", leftArrow.text);
    } 
}

//set buttonHover function
function buttonOff(){
    if ( arrow != topArrow.mouseout ) {
        resetArrow = document.getElementById("topArrow");
        resetArrow.setAttribute("src", topArrow.mouseout);
        menuText.setAttribute("src", start.text);
    }
    if ( arrow != rightArrow.mouseout ) {
        resetArrow = document.getElementById("rightArrow");
        resetArrow.setAttribute("src", rightArrow.mouseout);
        menuText.setAttribute("src", start.text);
    }
    if ( arrow != bottomArrow.mouseout ) {
        resetArrow = document.getElementById("bottomArrow");
        resetArrow.setAttribute("src", bottomArrow.mouseout);
        menuText.setAttribute("src", start.text);
    }
    if ( arrow != leftArrow.mouseout ) {
        resetArrow = document.getElementById("leftArrow");
        resetArrow.setAttribute("src", leftArrow.mouseout);
        menuText.setAttribute("src", start.text);
    }
}

//for each instance of buttons, assign class "active" onmouseover
for(var i = 0; i < buttons.length; ++i){
    buttons[i].onmouseover = function() {
        this.className = "active";
        arrow = document.getElementsByClassName("active");
        //get attribute
        arrow = arrow[0].getAttribute("src");
        console.log(arrow);
        buttonOn();
    };
}

//for each instance of buttons, remove class "active" onmouseout
for(var i = 0; i < buttons.length; ++i){
    buttons[i].onmouseout = function () {
        arrow = document.getElementsByClassName("active");
        //get attribute
        arrow = arrow[0].getAttribute("src");
        buttonOff();
        this.className = "";
    };
}

どんな助けでもエースになるでしょう！

JSフィドル

4

2 に答える 2

2

JS ですべてを処理しないでください。img タグを使用せずに、使用可能なアンカー タグに背景画像を設定し、:hover で背景画像を変更するだけです (スプライトを使用するのが最適です)。JS が作動する唯一の部分は、テキスト画像を変更することですが、img タグの src 属性を変更することもありません。すべてのテキスト画像をコンテンツとして (適切な代替テキストを使用して) プリロードし、それらを互いに重ねて配置し、ホバーされたボタンに応じて表示/非表示にする必要があります。

フィドルにたどり着いたら調整するかもしれませんが、おそらくこれらの情報を使用して自分で最適化することができます。

于 2013-07-31T12:35:27.103 に答える