所以我创建了一个erb块,它遍历一组图像,然后在给定的坐标处为每个图像显示div.tagged。在这种特定情况下,块迭代2个图像。我在下面创建的内容非常有效,但内容将动态添加,因此我需要找到一种方法来循环jQuery函数中的span.i_contact,.i_tagmap,span.o_contact和o_tagmap的值。有任何想法吗?提前谢谢。
ERB
<% if @new_manual.present? %>
<% n = 0 %>
<% @new_manual.steps.each do |step| %>
<% n += 1 %>
<% i_connection = Contact.find(step.input_contact) %>
<span class="i_contact<%= n %>" data-pos-x="<%= i_connection.pos_x %>" data-pos-y="<%= i_connection.pos_y %>" data-pos-width="<%= i_connection.pos_width %>" data-pos-height="<%= i_connection.pos_height %>" ="spanid<%= n %>"></span>
<% o_connection = Contact.find(step.output_contact) %>
<span class="o_contact<%= n %>" data-pos-x="<%= o_connection.pos_x %>" data-pos-y="<%= o_connection.pos_y %>" data-pos-width="<%= o_connection.pos_width %>" data-pos-height="<%= o_connection.pos_height %>" id="spanid<%= n %>"> </span>
<br>
<div class="image_panel<%= n %>" style="float:left; width:600px; position:relative;">
<%= image_tag(i_connection.image.image.url(:large)) %>
<div class="i_tagmap<%= n %>"></div>
</div>
<div class="image_panel<%= n %>" style="float:left; width:600px; position:relative;">
<%= image_tag(o_connection.image.image.url(:large)) %>
<div class="o_tagmap<%= n %>"></div>
</div>
<% end %>
<% end %>
的jQuery
$(document).ready(function(){
$('span.i_contact1').each(function() { //needs to be .i_contact(x)
var pos_width = $(this).data('pos-width');
var pos_height = $(this).data('pos-height');
var xpos = $(this).data('pos-x');
var ypos = ($(this).data('pos-y')) + -125;
console.log(ypos)
var taggedNode = $('<div class="tagged" />')
taggedNode.css({
"border":"5px solid red",
"width":pos_width,
"height":pos_height,
"left":xpos,
"top":ypos
});
$('.i_tagmap1').append(taggedNode) //needs to be .i_tagmap(x)
});
$("span.o_contact1").each(function() { //needs to be .o_contact(x)
var pos_width = $(this).data('pos-width');
var pos_height = $(this).data('pos-height');
var xpos = $(this).data('pos-x');
var ypos = $(this).data('pos-y');
var taggedNode = $('<div class="tagged" />')
taggedNode.css({
"border":"5px solid red",
"width":pos_width,
"height":pos_height,
"left":xpos,
"top":ypos
});
$('.o_tagmap1').append(taggedNode) //needs to be .o_tagmap(x)
});
修改
答案 0 :(得分:1)
首先,可能需要对标记进行微小更改(添加了课程i_contact
和o_contact
以及data-index
)
<span class="i_contact i_contact<%= n %>" data-pos-x="<%= i_connection.pos_x %>" data-pos-y="<%= i_connection.pos_y %>" data-pos-width="<%= i_connection.pos_width %>" data-pos-height="<%= i_connection.pos_height %>" ="spanid<%= n %>" data-index="<%= n %>"></span>
<span class="o_contact o_contact<%= n %>" data-pos-x="<%= o_connection.pos_x %>" data-pos-y="<%= o_connection.pos_y %>" data-pos-width="<%= o_connection.pos_width %>" data-pos-height="<%= o_connection.pos_height %>" id="spanid<%= n %>" data-index="<%= n %>"> </span>
然后
$(document).ready(function(){
$('span.i_contact').each(function() { //needs to be .i_contact(x)
var pos_width = $(this).data('pos-width');
var pos_height = $(this).data('pos-height');
var xpos = $(this).data('pos-x');
var ypos = ($(this).data('pos-y')) + -125;
console.log(ypos)
var taggedNode = $('<div class="tagged" />')
taggedNode.css({
"border":"5px solid red",
"width":pos_width,
"height":pos_height,
"left":xpos,
"top":ypos
});
var n = $(this).data('index')
$('.i_tagmap' + n).append(taggedNode) //needs to be .i_tagmap(x)
});
$("span.o_contact").each(function() { //needs to be .o_contact(x)
var pos_width = $(this).data('pos-width');
var pos_height = $(this).data('pos-height');
var xpos = $(this).data('pos-x');
var ypos = $(this).data('pos-y');
var taggedNode = $('<div class="tagged" />')
taggedNode.css({
"border":"5px solid red",
"width":pos_width,
"height":pos_height,
"left":xpos,
"top":ypos
});
var n = $(this).data('index')
$('.o_tagmap' + n).append(taggedNode) //needs to be .o_tagmap(x)
});
});