Question

我有一个装满最大的容器。 20个项目，每个项目从SQL数据库和ID为suit_(1-20)的自己的div获取其信息（如图像）。

这些项目列在下面的代码中：

<?php 
    $d = 1;
?>
<table >
    <tbody>
    <?php while $item = sqlsrv_fetch_object($user_item) : ?>
        <td align="center" height="50" width="21%">
            <div class="tooltips" href="">
                <div class="suitable" id="suit_<?php echo $d++ ?>" name="<?php echo $myDBID ?>">
                    <img src="images/icon/<?php echo $item->Img ?>">
                </div>
            </div>
        </td>   
    <?php endwhile; ?>  
    </tbody>
</table>

如您所见，每个div的ID为suit_(d++)，最多20个项目为1-20。这些div有一个jQuery脚本，可以在右键单击时触发上下文菜单事件：

$(function () {
    var count;
    for(count = 1; count < 21; count++) {
        var ID = document.getElementById('suit_' + count).getAttribute('id');
        $('#suit_' + count).contextPopup({
            items : [{
                label : 'Set',
                action : function () {
                    window.location.href = "?settest=" + ID
                }
            },
            null, 
            {
                label : 'Throw',
                action : function () {
                    window.location.href = "?throwtest=" + ID
                }
            },
            ]
        });
    }
});

我有一个for循环，应该从1到20计数并生成相应的ID（suit_1到suit_20）。

不知何故，该脚本仅适用于容器中的最后一项，因此如果我有10个项目，则所有项目都将获得ID suit_10。

有什么想法吗？

Answer 1

为什么不删除循环，并使用starts with attribute selector？

使用private void ShipOver(object sender, DragEventArgs e) { e.Effect = DragDropEffects.None; Button b = (Button)sender; b.BackColor = Color.Green; label22.Text = ""; }选择器会显示“以”...开头的任何内容：

^=

Answer 2

我通过为选择器添加each(function())并在事件开始之前设置变量object来解决了这个问题。

以前解决方案的问题是子功能

action : function () {
   window.location.href = "?settest=" + ID
}

导致$(this)无效。

请参阅以下完整代码：

jQuery(function($) {
    $('[id^="suit_"]').each(function(){
    var object = this;
    $(object).contextPopup({
        items : [{
            label : 'Set',
            action : function () {
                window.location.href = "?settest=" + object.id
            }
        },
        null, 
        {
            label : 'Throw',
            action : function () {
                window.location.href = "?throwtest=" + object.id
            }
        },
        ]
    });
    });
});

在jQuery中使用动态div ID

2 个答案: