2015-12-29 2 views
0

У меня проблема с переключением класса <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> 

Это весь мой код, проблема имеет форму бронирования билетов, где есть две кнопки радио, «One Way» и «Возвращение». Когда я нажимаю «One Way», тег <input> с id="return" должен быть скрыт, и это работает. Но диапазон вокруг него, который содержит слово «Возврат», не скрывается. Вы могли бы сказать, что я мог бы просто использовать id = "return" на <span> вместо <input>, но я не должен.

Возможное решение, о котором я думал, было в функции change() Я получаю элемент, используя его идентификатор «return», возможно ли получить интервал вместо ввода? И я не могу использовать JQuery. Следует использовать только чистый JavaScript.

+1

Почему бы вам просто не поставить идентификатор «возвращение» на весь диапазон обертывания? ' Return: ' –

ответ

0

Вы можете использовать parentElement свойство, как это

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

Спасибо @Sergey, отлично работает. Я даже пытался использовать parentNode, и он выполняет ту же работу. –

0

Фигурные это!

<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> 
Смежные вопросы