javascript - 迭代从数据库 Ruby/Javascript 检索的元素

Question

我正在处理这个问题，当然不知道如何解决。我可能选择了错误的方法，但让我再解释一下。某些信息正在从我的 SQLite 数据库中检索，此类信息用于在我的 DOM 中构建 div 结构。这个 div 结构代表商店中的一个项目，每个元素都应该附加一个操作，我使用一些 JS 来做到这一点。这是现在的样子:

HTML5:

<!-- Iterates over all activities retrieved from database -->

    <div class="row"  id="activity" draggable="true">
        <% @activities.each do |activity| %>

        <div class="large-4 small-6 columns">
            <div><%= image_tag activity.picture_url, :class => "img-style"%></div>

            <div class="panel img-panel" >
            <h5><%= activity.title %></h5>
            <h6 class="subheader"><%= activity.price %></h6>
                    </div>
        </div>

        <% end %>
    </div>

<!-- ends iteration -->

JS:

window.onload = function() {
   var activities = document.getElementById("activity");
   console.log('Length: '   + activities.length);

   var count = 0;
   for (act in activities) {
     var activity = activities[act];
     count++;
     console.log(count);

     activity.addEventListener('dragstart', activityDraggingStart, false);
     }

  function activityDraggingStart(e) {
        this.style.backgroundColor = 'blue';
  }
};

所以问题出在JS代码上:

• 首先，length 返回一个未定义的值，因为它是一个对象，但它应该是一个数组，不是吗？

• 其次，如果数据库只有 3 条记录，而我使用 count 变量，它会显示超过 200 条，这很尴尬，因为它应该只循环 3 次。

• 最后但并非最不重要的一点是，我想向检索到的元素添加一个操作，因为我试图通过拖放功能来解决这个问题，但我不能，因为显然 Activity 是 DOM 的 NodeList元素，并且只有每个元素都有 addEventListener。

在这种特殊情况下应该做什么？最好的方法是什么？基本上我想要实现的目标是将事件监听器添加到我的“activity”div，以便在“dragstart”和“dragstop”事件发生时执行一些操作。

Answer 1

认为一个问题可能是您有多个具有相同 id 名称的元素。尝试将其更改为类。

我这样做的方法是循环遍历行并将 jquery ui 可拖动添加到每个行。

这是 fiddle 。

https://jsfiddle.net/0wnwt29j/1/

 $(function () {

     var numItems = $('.activity').length;
     $('#myspan').text('num of activities: ' + numItems);

     $(".row").each(function (index) {
         var myelement = $(this);
         myelement.draggable({
             start: function () {
                 myelement.addClass('blue');
             },
             stop: function () {
                 myelement.removeClass('blue');
             }
         });
     });


 });