单击单选按钮时，需要帮助切换跨度的类

Need help in toggling the class of a span when a radio button is clicked

本文关键字：帮助 单选按钮 单击      更新时间：2023-09-26

当单击其中一个单选按钮时，我在切换<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>

这是我的全部代码，问题是机票预订表，其中有两个单选按钮，"单向"answers"返回"。当我单击"单向"时，带有id="return"的<input>标记应该被隐藏，这就起作用了。但它周围包含"返回"一词的跨度并没有被隐藏起来。你可能会说我可以在<span>上使用id="return"而不是<input>，但我不应该这样做。

我想到的可能的解决方案是，在函数change（）中，我使用元素的ID"return"来获取元素，是否可以获取跨度而不是输入？我不被允许使用JQuery。只能使用纯JavaScript。

您可以使用parentElement属性，比如这个

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

想明白了！

<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>
相关文章：