slideToggle div ID by

我想滑動一個div，當用戶將鼠標懸停在帶有標題的div上時，它具有更多描述。slideToggle div ID by

HTML和Ruby：

<% @posts.each do |post| %> 
<%= link_to post do %> 
    <div class="posts_index_div" id = <%=post.ticker%>> 
    <div class="posts_index_inside_div"> 
     Header 
    </div> 
    <div class="posts_index_hover_div" id = <%=post.ticker%>> 
     Description 
    </div> 
    </div>  
<%end%>

然後使用jQuery首先我隱藏所有的類，然後我想使用的slideToggle特定格在那裏，用戶懸停鼠標。

ready = function(){ 
$(".posts_index_hover_div").hide(); 
$(".posts_index_div").hover(function(){ 
    $(this.id).find(".posts_index_hover_div").slideToggle(); 
}); 
};

您可以看到，從模型生成ID和它們相等匹配標題和描述，但它不存在於具體的描述滑動。幫幫我？

來源

2014-07-22 MartinsB

而不是'$（this.id）'，只需使用$（this）或者嘗試使用下面的答案。 –

this.id只返回id名稱。這不是jQuery對象，如果像前綴"#"使用所以儘量$("#"+this.id)或簡單地使用當前對象$(this)

$(".posts_index_div").hover(function(){ 
    $(this).find(".posts_index_hover_div").slideToggle(); 
});

或

$(".posts_index_div").hover(function(){ 
    $("#"+this.id).find(".posts_index_hover_div").slideToggle(); 
});

FIDDLE

來源

2014-07-22 09:07:19

.next（）將不起作用，因爲OP所尋找的元素是後代。！！ –

雖然這個答案可能會解決問題，但您應該詳細闡述一下並解釋您的代碼的功能。 –

@DavidRönnqvist - 我對我的答案表示感謝 –

使用此jQuery的：

$(".posts_index_hover_div").slideToggle(); 
$(".posts_index_div").hover(function(){ 
    $(this).find(".posts_index_hover_div").slideToggle(); 
});

看看這個工作Fiddle ..

來源

2014-07-22 09:10:42

slideToggle div ID by

回答

相關問題