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

希望这是有道理的，任何帮助将不胜感激。

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