Ruby On Rails在link_to中使用帮助器方法

时间：2014-10-31 11:40:50

标签： ruby-on-rails

您好我一周前开始使用Ruby on Rails并且仍然相当新，所以如果有人能帮我解决这个问题，我将非常感谢这是一个个人项目我正在努力而不是学校工作。所以问题是我试图在我的html页面上点击我的jcarousel中的一个动漫图像，并使用下面列出的帮助方法在p标签中的单独div（id = content）中显示其描述但是它无法正常工作它总是从我的数据库中显示动画的最后描述，任何人都可以帮忙吗？

我的助手方法 

module HomepageHelper
attr_accessor :info
def getDescription(des)
   @info = des
end
def setDescription()
   content_tag(:p, @info)
end
end

我的HTML页面 

 <!DOCTYPE html>
 <html>
<head>,
    <%= stylesheet_link_tag "application", media:"all", "data-turbolinks-track" => true %>
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
    <%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"%>
    <title>Anime Shuffle</title>
</head>
<body>
    <%= yield %>
    <div class="container">
        <div class="header">
            <h1>Anime Shuffle</h1>

                <ul id="navigator">
                <li><a href="home.html">Home</a></li>
                <li><a href="video.html">Videos</a></li>
                <li><a href="about.html">List</a></li>
                </ul>
        </div>

        <div class="ContentSearch">
            <ul id="search">

                <li><input type="text" name="query" value="Search"></input></a></li>
                <li><a href="home.html">Popular</a></li>
                <li><a href="videos.html">New</a></li>
                <li><a href="anime_list.html">Shuffle</a></li>

            </ul>

        </div>

        <div class='jcarousel'>

            <ul id='carousel_ul'>
                    <% @animes.each do |anime| %>
                        <li>
                            <%= link_to image_tag(anime.img_src,:data => {:description => anime.aname, :title => anime.aname}),'getDescription(anime.description)' %> 

                            <figcaption> 
                                <%= anime.aname %> 
                            </figcaption>

                        </li>

                    <% end %>


            </ul>
            <div id="left1" class="left"  data-jcarouselcontrol="true"><div class="arrow-left"> </div>  
            </div>
            <div id="right1"class="right" data-jcarouselcontrol="true"><div class="arrow-right"></div>
            </div>  
        </div>

        <div class="content">
                <div id="Rating">
                    <p>0.0</p>
                    <div id="episode-title">
                        <p>Episode List</p>
                    </div>
                    <div id= "episodes-list">
                        <li><p>Episode<p>1<p>-<p>Upload Date</p></p></p></li>
                    </div>

                </div>
                <div id ="info">
                    <p>Synposis</p>
                    <div id = "info-content">
                        <p><%= setDescription %></p>
                        <div id="tags">
                            <li><p>Tags: <p>something, somthing, something, something</p></p></li>
                        </div>
                    </div>

                </div>
                <div id="Review">
                    <p>Review</p>
                    <div id= "Review-content">
                        <p>Ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut?</p>
                    </div>
                </div>
                </div>
        </div>



    </div>
    <div class="footer">
        <div id='footer-container'>
            <p>Powered by Net</p>
        </div>
    <div>

</body>

的javascript 

var id = "";

setInterval(function() {

    var left1 = parseInt($('#carousel_ul').css('left'));

    if ($('#left1').is(":hover")) {
        $('#carousel_ul').css('left', left1+1.5);
        if(left1> 150)
        {
            $('#carousel_ul li:last').insertBefore($('#carousel_ul li:first'))
            $('#carousel_ul').css('left', 0);
        }
    }
     else if ($('#right1').is(":hover")) {
        $('#carousel_ul').css('left', left1-1.5);
        if(left1 < -150)
        {
            $('#carousel_ul li:first').insertAfter($('#carousel_ul li:last'))
            $('#carousel_ul').css('left', 0);
        }
    }
    },10);
    $(document).ready(function() {
       setInterval();
    });

1 个答案:

答案 0 :(得分：0)

问题是 @info 是一个实例变量，因此在页面加载时会创建一次。现在，因为您有一个循环来打印轮播，所以您反复调用＆＃39; getDescription＆＃39; 方法，每次重写 @info 变量。当您最终尝试使用 setDescription 来使用它时，您当然会得到最后的描述。

此处的问题是，您在服务器时间使用最后一个描述生成一个＆＃34;内容＆＃34; div。你应该为每个动画创建一个（有一个循环，就像你在旋转木马中所做的那样），显示正确的动画点击图像。

没有JavaScript代码，很难帮助你。

修改

好的，经过一些评论后我可能会理解你有点困惑。 这里的问题是您正在混合客户端和服务器端代码。 HomepageHelper 是一个Rails帮助程序，因此代码只存在于服务器端，并且您无法从javascript引用它，您只能使用它来构建视图。 因此，首先我们需要更新轮播中的link_to标记，以使te链接管理 onclick 事件：

link_to image_tag(anime.img_src,:data => {:description => anime.aname, :title => anime.aname}), '#',
    :onclick => 'setDetail("contentFor' + anime.id +  '")'

将 onclick 事件添加到轮播图片的位置，所以如果点击它们，您将调用javascript函数 setDetail 传递＆＃34; contentForN＆＃34;作为参数，其中N将根据动漫ID 而变化。

下一步，让我们实现这个新的javascript函数（我假设您正在使用jQuery）：

var current = null;

var setDetail = function (divId) {
    if (current != null) {
        $("#"+current).css("visibility", "hidden");
        $("#"+current).css("height", 0);
    }
    $("#"+divId).css("visibility", "visible");
    $("#"+divId).css("height", auto);
}

最后，您必须打印＆＃34;内容＆＃34;每个动漫的div ：

<% @animes.each do |anime| %>
    <div id="contentFor<%= anime.id %>" class="content" style="visibility: hidden; height: 0">
            <div id="Rating">
                <p>0.0</p>
                <div id="episode-title">
                    <p>Episode List</p>
                </div>
                <div id= "episodes-list">
                    <li><p>Episode<p>1<p>-<p>Upload Date</p></p></p></li>
                </div>

            </div>
            <div id ="info">
                <p>Synposis</p>
                <div id = "info-content">
                    <p><%= anime.description %></p>
                    <div id="tags">
                        <li><p>Tags: <p>something, somthing, something, something</p></p></li>
                    </div>
                </div>

            </div>
            <div id="Review">
                <p>Review</p>
                <div id= "Review-content">
                    <p>Ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut?</p>
                </div>
            </div>
            </div>
    </div>
<% end %>

这应该有用，你不再需要助手了。 您应该在标准CSS中移动内联css。

相关问题
最新问题