獲取 DIV ID 然后更改 href 值

Question

我有多個使用此 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 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;

所以這個按鈕有 32 個不同的變量。 我希望能夠向變量添加一個 onclick 事件，該事件可能會獲取其 div id，然后相應地更改后退按鈕。

例如，您在 div 2 上按 no，在這種情況下，這將引導您進入 div 5 而不是 div 6。后退按鈕需要指向 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>

希望這是有道理的，任何幫助將不勝感激。

Answer 1

您可以在 div 上使用數據屬性來了解點擊的位置：

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

等等。

在您的腳本中，您可以讀取該屬性

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

希望有所幫助，您的問題有點令人困惑；-)

Answer 2

除了數據屬性，您還可以跟蹤當前和上一個 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>