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代码：

首先，长度返回一个未定义的因为它是一个对象，但它应该是一个数组，应该是吗？
其次，如果数据库只有三个记录，并且我使用count变量，则显示超过200个，这是不方便的，因为它应该只循环三次。
最后但并非最不重要的是，我想为检索到的元素添加一个动作，因为我试图通过拖放功能来解决问题，但我不能因为显然活动是DOM元素的NodeList，只有每个元素都有addEventListener。

在这种特殊情况下该怎么办？什么是最好的方法？基本上我想要实现的是将事件监听器添加到我的＆＃34;活动＆＃34; div，为了做一些东西，当'dragstart＆＃39; ＆安培; ＆＃39; dragstop＆＃39;事件发生了。

Answer 1

我相信你的第一个问题的答案是你试图在ID上调用.length，默认情况下，它应该只是一个项目。如果您正在尝试获取列出的所有活动的数组，我会将ID带到一个类并将您的循环移到所有div之外，例如

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

    <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>

  </div>
<% end %>

其次，它显示200的原因是因为它只有一个项目（因为“getElementByID”）它正在计算字符串中的字符数，将那个坏男孩改为“getElementsByClassName。”

和第三......好吧......改变这些可能会解决它......但我并不完全确定。无论如何，我希望这会有所帮助。

Answer 2

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

我这样做的方法是遍历行并将jquery ui添加到每个行中。

这是小提琴。

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


 });

Answer 3

您的所有麻烦都是由于误用了html属性id。

回答问题1

因为id是单个DOM元素的标识，所以单个网页不应包含2个或更多具有相同ID的DOM元素。

您可以更改

<div class="row" id="activity" draggable="true">

到

<div class="row" class="activity" draggable="true">

并按

选择它们

document.getElementsByClassName('activity');

回答问题2和3

由于document.getElementById()只返回一个DOM元素，因此您正在遍历其200多个属性，这就是您的count变量的数量，以及为什么您无法将事件侦听器附加到它们的原因。如果您根据后一个答案更改了代码，那么应该没问题。

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

3 个答案: