Fatal编程技术网
  • javascript/
  • 在Rails应用程序中使用Javascript显示和隐藏

在Rails应用程序中使用Javascript显示和隐藏

javascript html ruby-on-rails

在Rails应用程序中使用Javascript显示和隐藏,javascript,html,ruby-on-rails,Javascript,Html,Ruby On Rails,我不熟悉JavaScript和rails。我正在用RubyonRails构建一个站点，并尝试在视图中使用JavaScript。我需要隐藏和显示一个表的一些元素，我有一些脚本任务，它只对表的第一行工作。有没有更好的办法谢谢你的帮助。我需要每个按钮来显示或隐藏表中相应的元素 application.html <!DOCTYPE html> <script> function changeColor(newColor) { document.getElemen

我不熟悉JavaScript和rails。我正在用RubyonRails构建一个站点，并尝试在视图中使用JavaScript。我需要隐藏和显示一个表的一些元素，我有一些脚本任务，它只对表的第一行工作。有没有更好的办法谢谢你的帮助。我需要每个按钮来显示或隐藏表中相应的元素

application.html

    <!DOCTYPE html>
<script>
function changeColor(newColor) {

    document.getElementById("para1").style.display = "none"
    document.getElementById("para2").style.display = "none"
    document.getElementById("para3").style.display = "none"
    document.getElementById("para4").style.display = "block"
    document.getElementById("para5").style.display = "none"
  }


  function show(newColor) {

    document.getElementById("para1").style.display = "block"
    document.getElementById("para2").style.display = "block"
    document.getElementById("para3").style.display = "block"
    document.getElementById("para4").style.display = "none"
    document.getElementById("para5").style.display = "block"

  }
  </script>
<html>
<head>
  <title>VincentricData</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= stylesheet_link_tag    "defaults", media: "all", "data-turbolinks-track" => true %>
  <%= csrf_meta_tags %>
</head>

<body>

<%= yield %>

</body>
</html>


函数changeColor（newColor）{
document.getElementById（“para1”）.style.display=“无”
document.getElementById（“para2”）.style.display=“无”
document.getElementById（“para3”）.style.display=“无”
document.getElementById（“para4”）.style.display=“block”
document.getElementById（“para5”）.style.display=“无”
}
功能显示（新颜色）{
document.getElementById（“para1”）.style.display=“block”
document.getElementById（“para2”）.style.display=“block”
document.getElementById（“para3”）.style.display=“block”
document.getElementById（“para4”）.style.display=“无”
document.getElementById（“para5”）.style.display=“block”
}
文森特酒店
正确%>
正确%>
index.html

<h1>Listing vehicles</h1>



    <table>
      <thead>
        <tr>
          <th>Year</th>
          <th>Make</th>
          <th>Model</th>
          <th>Msrp</th>
          <th>Rating</th>
          <th>Total operating costs</th>
          <th colspan="3"></th>
        </tr>
      </thead>

      <tbody>
        <% @vehicles.each do |vehicle| %>
          <tr>
            <td><%= vehicle.year %></td>
            <td><%= vehicle.make %></td>
            <td><%= vehicle.model %></td>
            <td><div id="para1" ><%= vehicle.msrp %></div></td>
            <td><div id="para2" ><%= vehicle.rating %></div></td>
            <td><div id="para3" ><%= vehicle.total_operating_costs %></div></td>
            <td><div id="para4" ><button onclick="show('#00FFFF');">Show</button></div></td>
            <td><div id="para5" ><button onclick="changeColor('#00FFFF');">hide</button></div></td>
            <td><%= link_to 'Edit', edit_vehicle_path(vehicle) %></td>
            <td><%= link_to 'Destroy', vehicle, method: :delete, data: { confirm: 'Are you sure?' } %></td>
          </tr>
        <% end %>
      </tbody>
    </table>

    <br>

    <%= link_to 'New Vehicle', new_vehicle_path %>

列出车辆
年
制作
模型
Msrp
评级
总运营成本
显示
隐藏
首先，如果您的行处于循环中，您不能为元素提供硬编码的ID，因为将有多个HTML元素具有相同的ID，这肯定非常糟糕。 为元素提供一个类，该类可以复制任意次数

第二，您可以（如果可能的话，可能应该）使用jQuery来处理这类事情。 它比纯javascript更加直观和简单

<script src='/somewhere/jquery.min.js'></script>
<script>
    (function ($) {
        // Here you are sure that jQuery is included in your HTML page
        $(function () {
            // Now the DOM is fully loaded, you can use some javascript without problem

            // Listen a click on each ".para4" element : (class='para4')
            $('.para4').on('click', function (event) {
                // Get the parent <tr> element
                var $tr = $(this).closest('tr');
                // On this parent <tr>, display all .para elements
                $tr.find('.para').show();
                /*
                This is equivalent to :
                $tr.find('.para').css('display', 'block');
                */
                // Then hide the .para4 one only.
                $tr.find('.para4').hide();
                /*
                This is equivalent to :
                $tr.find('.para4').css('display', 'none');
                */
            });
            // Listen a click on each ".para5" element : (class='para5')
            $('.para5').on('click', function (event) {
                // Get the parent <tr> element
                var $tr = $(this).closest('tr');
                // On this parent <tr>, hide all .para elements
                $tr.find('.para').hide();
                /*
                This is equivalent to :
                $tr.find('.para').css('display', 'none');
                */
                // Then display the .para4 one only.
                $tr.find('.para4').show();
                /*
                This is equivalent to :
                $tr.find('.para4').css('display', 'block');
                */
            });
        });
    })(window.jQuery);
</script>


（函数（$）{
//在这里，您可以确定jQuery包含在您的HTML页面中
$（函数（）{
//现在DOM已完全加载，您可以毫无问题地使用一些javascript
//听一听，点击每个“.para4”元素：（class='para4'）
$（'.para4'）。在（'click'，函数（事件）{
//获取父元素
var$tr=$（this.closest（'tr'）；
//在此父级上，显示所有.para元素
$tr.find（'.para'）.show（）；
/*
这相当于：
$tr.find（'.para'）.css（'display'，'block'）；
*/
//然后只隐藏一个.para4。
$tr.find（'.para4'）.hide（）；
/*
这相当于：
$tr.find（'.para4'）.css（'display'，'none'）；
*/
});
//听一听每个“.para5”元素的点击：（class='para5'）
$（'.para5'）。在（'click'，函数（事件）{
//获取父元素
var$tr=$（this.closest（'tr'）；
//在此父级上，隐藏所有.para元素
$tr.find（'.para'）.hide（）；
/*
这相当于：
$tr.find（'.para'）.css（'display'，'none'）；
*/
//然后仅显示.para4一个。
$tr.find（'.para4'）.show（）；
/*
这相当于：
$tr.find（'.para4'）.css（'display'，'block'）；
*/
});
});
})（window.jQuery）；
小提琴：

没有jQuery，您必须使用循环和事件侦听器：

// Find all your .para4 elements
var para4Array = document.getElementsByClassName('para4');
var para4Length = para4Array.length;
// For each of them, listen for a click event
while (para4Length--) {
    para4Array[para4Length].addEventListener('click', function (event) {
        // Find the parent's <tr>
        var tr = this.parentNode.parentNode;
        // Display all .para children of this <tr>
        tr.querySelectorAll('.para').style.display = 'block';
        // Then hide the .para4 one
        tr.querySelectorAll('.para4').style.display = 'none';
    });
}

// Find all your .para5 elements
var para5Array = document.getElementsByClassName('para5');
var para5Length = para5Array.length;
// For each of them, listen for a click event
while (para5Length--) {
    para5Array[para5Length].addEventListener('click', function (event) {
        // Find the parent's <tr>
        var tr = this.parentNode.parentNode;
        // Hide all .para children of this <tr>
        tr.querySelectorAll('.para').style.display = 'none';
        // Then display the .para4 one
        tr.querySelectorAll('.para4').style.display = 'block';
    });
}

//查找所有.para4元素
var para4Array=document.getElementsByClassName（'para4'）；
var para4Length=para4Array.length；
//对于它们中的每一个，侦听单击事件
while（para4Length--）{
para4Array[para4Length].addEventListener（'click'，函数（事件）{
//找到父母的
var tr=this.parentNode.parentNode；
//显示此项的所有.para子项
tr.querySelectorAll（'.para'）.style.display='block'；
//那就藏起来那只
tr.querySelectorAll（'.para4'）.style.display='none'；
});
}
//找到你所有的.para5元素
var para5Array=document.getElementsByClassName（'para5'）；
var para5Length=para5Array.length；
//对于它们中的每一个，侦听单击事件
while（para5Length--）{
para5Array[para5Length].addEventListener（'click'，函数（事件）{
//找到父母的
var tr=this.parentNode.parentNode；
//隐藏所有的孩子
tr.querySelectorAll（'.para'）.style.display='none'；
//然后显示.para4
tr.querySelectorAll（'.para4'）.style.display='block'；
});
}