Question

单击其中一个单选按钮时切换<span>的类时出现问题。

<html>
<head></head>
<style type="text/css">
    .eHide
    {
        display:none;
    }
</style>
<script type="text/javascript">
    function change()
    {
        var NAME = document.getElementById("return");
        var currentClass = NAME.className;
        if (currentClass == "eHide") { // Check the current class name
            NAME.className = "";   // Set other class name
        } else {
            NAME.className = "eHide";  // Otherwise, use `second_name`
        }
    }

    function disp()
    {
        document.getElementById("spanfrom").innerHTML = document.getElementById("from").value;
        document.getElementById("spanto").innerHTML = document.getElementById("to").value;
        document.getElementById("spandate").innerHTML = document.getElementById("departure").value;
    }
</script>
<body>
    <div style="width: 1000px">
        <div id="innerWrapper"  style="position:relative;left:50px;top:20px;">
            <div>
                From: <input type="text" id="from" placeholder="Source"/>
                <span style="float:right">To: <input type="text" id="to" placeholder="Destination"/></span>
            </div>
            <div>
                Depart Date: <input type="text" id="departure" placeholder="Departure"/>
                <span style="float:right">Return: <input type="text" id="return" placeholder="Return"/></span>
            </div>

            <div id="control">
                <input type="radio" name="radio" value="oneWayRadio" onClick="change();"> One Way
                <input type="radio" name="radio" value="returnRadio"  checked onClick="change();"> Return
                <button value="Submit" onClick="disp()" type="submit">Submit</button>
            </div>

            <div class="text">You are going from <span id="spanfrom"></span> to  <span id="spanto"></span> on <span id="spandate"></span></div>
        </div>
    </div>
</body>
</html>

这是我的整个代码，问题是机票预订表格，其中有两个单选按钮，＆＃34; One Way＆＃34;和＆＃34;返回＆＃34;。当我点击＆＃34; One Way＆＃34;时，应隐藏<input>标记为id="return"并且该标记正常工作。但是它周围的范围包含了单词＆＃34; Return＆＃34;没有隐藏。你可能会说我可以使用id =＆＃34; return＆＃34;在<span>上而不是<input>，但我不应该这样做。

我想到的可能的解决方案是，在函数change（）中我使用它来获取元素＆＃34;返回＆＃34;，是否可以获得跨度而不是输入？而且我不允许使用JQuery。只应使用纯JavaScript。

Answer 1

您可以使用parentElement属性，例如

var returnSpanElement = document.getElementById("return").parentElement;

Answer 2

想出来了！

<html>
<head></head>
<style type="text/css">
    .eHide
    {
        display:none;
    }
</style>
<script type="text/javascript">
    function change()
    {
        var NAME = document.getElementById("return").parentNode;
        var currentClass = NAME.className;
        if (currentClass == "eHide") { 
            NAME.className = "";   
        } else {
            NAME.className = "eHide";
        }
    }

    function disp()
    {
        document.getElementById("spanfrom").innerHTML = document.getElementById("from").value;
        document.getElementById("spanto").innerHTML = document.getElementById("to").value;
        document.getElementById("spandate").innerHTML = document.getElementById("departure").value;
    }
</script>
<body>
    <div style="width: 1000px">
        <div id="innerWrapper"  style="position:relative;left:50px;top:20px;">
            <div>
                From: <input type="text" id="from" placeholder="Source"/>
                <span style="float:right">To: <input type="text" id="to" placeholder="Destination"/></span>
            </div>
            <div>
                Depart Date: <input type="text" id="departure" placeholder="Departure"/>
                <span style="float:right">Return: <input type="text" id="return" placeholder="Return"/></span>
            </div>

            <div id="control">
                <input type="radio" name="radio" value="oneWayRadio" onClick="change();"> One Way
                <input type="radio" name="radio" value="returnRadio"  checked onClick="change();"> Return
                <button value="Submit" onClick="disp()" type="submit">Submit</button>
            </div>

            <div class="text">You are going from <span id="spanfrom"></span> to  <span id="spanto"></span> on <span id="spandate"></span></div>
        </div>
    </div>
</body>
</html>

单击单选按钮时需要帮助切换范围的类

2 个答案: