0

所以我创建了一个 erb 块，它遍历一组图像，然后在给定坐标处为每个图像显示 div.tagged。在这种特殊情况下，该块会遍历 2 个图像。我在下面创建的内容完美无缺，但是内容将被动态添加，因此我需要找出一种方法来循环 jQuery 函数中的 span.i_contact、.i_tagmap、span.o_contact 和 o_tagmap 的值。有任何想法吗？提前致谢。

再培训局

<% 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)
});

编辑

链接到生成的 HTML

4

1 回答 1

1

首先，可能需要对标记进行微小的更改（添加了类i_contactando_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)
    });
});
于 2013-07-23T02:49:26.670 回答