Javascript 如何使用复选框中的图像填充枚举元素？

我正在尝试创建一个比较函数，用户可以单击一个复选框，它会将一个关联的图像发送到一个枚举列表

以下是我的列表代码：

<div class="compareTray">
    <ul>
        <li class="item_0"></li>
        <li class="item_1"></li>
        <li class="item_2"></li>
        <li class="item_3"></li>
    </ul>
</div>

以下是示例HTML，用户将从中单击以填充上述列表：

<div class="project1 clearfix">
          <figure> <img src="images/submenu/submenu-1.png" alt="img"/>
            <div class="overlay"> <a href="#">DETAILS</a> </div>
          </figure>
          <div class="project-detail">
            <h3>PRODUCT</h3>
            <span class="span-red"> </span>
            <p class="lot"><strong>Location</strong>: LOT NAME</p>
            <p class="rating"><strong>Customer Rating</strong>: Not enough ratings yet</p>
            <div class="compare-btn clearfix">
              <input type="checkbox" id="stockno1"/>
              Compare </div>
          </div>
        </div>
        <div class="project1 clearfix">
          <figure> <img src="images/submenu/submenu-2.png" alt="img"/>
            <div class="overlay"> <a href="#">DETAILS</a> </div>
          </figure>
          <div class="project-detail">
            <h3>PRODUCT</h3>
            <span class="span-red"> </span> 
            <p class="lot"><strong>Location</strong>: LOT NAME</p>
            <p class="rating"><strong>Customer Rating</strong>: Not enough ratings yet</p>
            <div class="compare-btn clearfix">
              <input type="checkbox" id="stockno2"/>
              Compare </div>
          </div>
        </div>

这是我的剧本：

$('input.compare').click(function(){
    var i = 0;
    alert("i before: " + i);
    for( var i = 0; i < 5;  ) {
        var me = $(this).attr("refid"); 
        var item =  "li[class^=item_"+ i + "]"
        alert(item);
        $('.item_'+ i).append('<img src="images/submenu/' + me + '.png" alt="compare1" height="28" width="28" />');
        //++i;
        i = i +1;
        alert("i after: " + i);
    }
});

---

现在，如果单击任何一个compare btn复选框，它将遍历整个循环，并用相同的项填充整个列表。我要做的是用单击的第一项填充第一个列表项，然后用单击的第二项填充第二个列表项，以此类推。

您不需要每次单击都循环列表中的每个项。相反，请尝试以下方法：

$('.compare-btn input').each(function() {
    $(this).click(function(){
        var me = $(this).attr("refid"); 
        $(".compareTray ul li:not(:has(>img))").first().append('<img src="images/submenu/' + me + '.png" alt="compare1" height="28" width="28" />');
    });
}

它所做的是在列表中查找不包含的。然后将图像附加到找到的第一个图像

---

是一个JSFIDLE，它使用按钮（而不是复选框）和div（而不是图像）演示了此功能的简化版本。

太棒了！谢谢你的帮助。