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并且按否，在这种情况下将引导你到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

除了数据属性，您还可以跟踪当前和上游的内容

<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>

获取DIV ID然后更改href值

2 个答案: