2

このjavascriptを使用して切り替えられる複数のdivがあります

<script language="JavaScript">
    //here you place the ids of every element you want.
    var ids = new Array('a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9', 'a10');

    function switchid(id) {
        hideallids();
        showdiv(id);
    }

    function hideallids() {
        //loop through the array and hide each element by id
        for (var i = 0; i < ids.length; i++) {
            hidediv(ids[i]);
        }
    }

    function hidediv(id) {
        //safe function to hide an element with a specified id
        if (document.getElementById) { // DOM3 = IE5, NS6
            document.getElementById(id).style.display = 'none';
        }
        else {
            if (document.layers) { // Netscape 4
                document.id.display = 'none';
            }
            else { // IE 4
                document.all.id.style.display = 'none';
            }
        }
    }

    function showdiv(id) {
        //safe function to show an element with a specified id
        if (document.getElementById) { // DOM3 = IE5, NS6
            document.getElementById(id).style.display = 'block';
        }
        else {
            if (document.layers) { // Netscape 4
                document.id.display = 'block';
            }
            else { // IE 4
                document.all.id.style.display = 'block';
            }
        }
    }
</script>

次に、各 div には、ある div から別の div に切り替えるいくつかのオプション (はい、いいえ、続行など) があります。

<div id='a1' style="display:block;">
                <div style="border-bottom: 1px solid black;margin-left:  auto; margin-right:  auto;text-align: center;">
                <i>"I'm sorry to hear you have lost your card.  I can cancel the lost card for your proection."</i><br />
                <b>Find the most recent card by checking it's ISSUE date.</b><br /><br />
                </div>
                &nbsp;
                <div style="margin-left:  auto; margin-right:  auto;text-align: center;">
                <span style="color:red;">Has the card been deactivated already?</span><br /><br />
        <a class="spl_btn btn_green" href="javascript:switchid('a2');" onclick="document.getElementById('back').href='javascript:switchid(\'a1\');';"><span><span>Yes</span></span></a>
        <a class="spl_btn btn_pink" href="javascript:switchid('a3');" onclick="document.getElementById('back').href='javascript:switchid(\'a1\');';"><span><span>No</span></span></a>
                </div>
                </div>

次に、切り替えdivの外側に戻るボタンがあります。オプションを選択したときに上から見ると、対応する div に変わり、戻るボタンの href 値が切り替わります。今、私の唯一の問題は、2 つの div (番号 3 と 4) があり、両方に 5 または 6 のいずれかにつながるオプション (この場合はいいえ) があることです。この特定のボタンは、php 変数にあるように

<?php echo $addr_update; ?>

次に、変数自体が次のように機能します

$project_id = $_GET["project_id"];
switch ($project_id) {
case "al":
    $addr_update = "<a class=\"spl_btn btn_pink\" href=\"javascript:switchid('a5');\"><span><span>No</span></span></a>";
    break;

したがって、この 1 つのボタンには 32 の異なる変数があります。onclick イベントを変数に追加して、div id を取得し、それに応じて戻るボタンを変更できるようにしたいと考えています。

たとえば、div 2 で no を押すと、この場合、div 6 ではなく div 5 に移動します。戻るボタンは、div 2 に戻る必要があります。div 2 と div 3 の両方が 5 または 6 につながる可能性があるためです。変数によっては、ユーザーが以前にどこにいたかを知らずに、onclick イベントを追加して戻るボタンを変更することはできません。

編集：もう少し追加するだけです。DIV 2 のオプションをクリックすると、戻るボタンが DIV 2 に設定されます。したがって、DIV ID を取得してそのhref="javascript:switchid('a4');"一部に適用できれば、簡単なはずです。このようなもの：

<a class="spl_btn btn_green" href="javascript:switchid('a2');" **onclick="document.getElementById('back').href='javascript:switchid(\'a1\');'; Some sort of function that would grab the containing divs id and then put it in the .href value of the document.getElement part**"><span><span>Yes</span></span></a>

これが理にかなっていることを願っており、どんな助けでも大歓迎です。

4

2 に答える 2

2

どのクリックでどこに行くべきかを知るために、div で data-attributes を使用できます。

<div id="div1" data-on-yes="div2" data-on-no="div3"></div>

等々。

スクリプトで、その属性を読み取ることができます

document.getElementById('div1').getAttribute('data-on-yes')

お役に立てば幸いです。あなたの質問はややこしいです ;-)

于 2012-11-27T20:56:22.520 に答える
1

データ属性とは別に、現在および前のIDを追跡できます

<script type="text/javascript">
    //here you place the ids of every element you want.
    var ids = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9', 'a10'];

    function switchid(id) {
        if(id === current) {return;}
        hideallids();
        showdiv(id);
        current = id;
    }

    //previous and current id;
    var prev, current;

    function switchNext() {
        var next = this.getAttribute("data-next-id"); //get next id from data-attr
        prev = this.parentNode.parentNode.id; //get parent div's id
        switchid(next);
    }

    function switchPrev() { //For back link
        if(!prev) {return;}
        var curr = current; //store current id
        switchid(prev); //switch to what was previous
        prev = curr; //set prev to what was current. Not sure if you need this
    }

    function hideallids() {
        //loop through the array and hide each element by id
        for (var i = 0; i < ids.length; i++) {
            hidediv(ids[i]);
        }
    }

    function hidediv(id) {
        document.getElementById(id).style.display = 'none';
    }

    function showdiv(id) {
        document.getElementById(id).style.display = 'block';
    }
</script>

マークアップ

<div id='a1' style="display:block;">
                <div style="border-bottom: 1px solid black;margin-left:  auto; margin-right:  auto;text-align: center;">
                <i>"I'm sorry to hear you have lost your card.  I can cancel the lost card for your proection."</i><br />
                <b>Find the most recent card by checking it's ISSUE date.</b><br /><br />
                </div>
                &nbsp;
                <div style="margin-left:  auto; margin-right:  auto;text-align: center;">
                <span style="color:red;">Has the card been deactivated already?</span><br /><br />
        <a class="spl_btn btn_green" data-next-id="a2" href="#" onclick="switchNext.call(this);"><span><span>Yes</span></span></a>
        <a class="spl_btn btn_pink" data-next-id="a3" href="#" onclick="switchNext.call(this);"><span><span>No</span></span></a>
                </div>
                </div>

そして戻るボタンについて

 <a id="back" onclick="switchPrev.call(this);" href="#">Back</a>
于 2012-11-27T21:59:51.253 に答える