2014-09-19 3 views
0

У меня есть 3 кнопки радио и 3 дивы, как:как скрыть DIV с помощью radio_button_tag

<%= radio_button_tag('radioButton','1')%> 
<%= radio_button_tag('radioButton','2')%> 
<%= radio_button_tag('radioButton','3')%> 

<div id="div1" style="display: none;">div1</div> 
<div id="div2" style="display: none;">div2</div> 
<div id="div3" style="display: none;">div3</div> 

Я новичок в rails.I хочу показать div1 при первом radibutton щелкают, показать div2 при втором нажатии radibutton и покажите div3 при нажатии третьей кнопки.

Я могу легко сделать это в ASP.NET, но как я могу это сделать в ROR. Могу ли я достичь этого без использования JavaScript или ajax.

+0

Это орет для JavaScript, хотя .. – rorofromfrance

+0

я не знаю много о JavaScript, поэтому я хочу сделать это в Rails, это возможно, или я обязан использовать Javascript. – John

+0

В любое время, когда у вас есть «живое» внешнее взаимодействие, это означает, что вам нужен JavaScript так или иначе – rorofromfrance

ответ

0

Это просто:

сделать расслоение плотного файл с помощью следующего кода:

$(function() { 
    var checkbox = document.getElementById('radioButton'); 
    var delivery_div = document.getElementById('div1'); 
    var showHiddenDiv = function(){ 
     if(checkbox.checked) { 
      delivery_div.style['display'] = 'block'; 
     } else { 
      delivery_div.style['display'] = 'none'; 
     } 
    } 
    checkbox.onclick = showHiddenDiv; 
    showHiddenDiv(); 
}); 
0

Если вы хотите, чтобы скрыть другие дивы, когда радио щелкнули вы можете попробовать это:

Вашего шаблон вид ничего не меняет:

<%= radio_button_tag('radioButton','1') %> 
<%= radio_button_tag('radioButton','2') %> 
<%= radio_button_tag('radioButton','3') %> 

<div id="div1" style="display: none;">div1</div> 
<div id="div2" style="display: none;">div2</div> 
<div id="div3" style="display: none;">div3</div> 

В вашем файле javascript скажем, application.js (обратите внимание, что если включить в этот один, все кнопки радио будет иметь такое поведение ... Вы можете использовать класс и связать этот класс только)

$(function() { 
    $(document).on("click","input[type=radio]", function() { 
    var id = "#div"+$(this).val(); 
    $(id).show(); // display associated div 
    $("div[id^='div']:not(" + id + ")").hide() // hide the others 
    }) 
}); 
0

В вашем случае я не уверен в пути просто сделать это в рельсах. Что-то вроде обычно делается в JS или JQuery. Вы можете проверить эту ссылку ниже, это то, что вы ищете, это простой учебник по show/hide div с переключателем.

http://community.sitepoint.com/t/very-basic-show-hide-div-with-radio-button/4932

Смежные вопросы