Question

我有从ajax响应动态生成的span元素。我试图使用下面的代码检测跨度值的变化，它似乎在jsfiddle中使用固定元素，但不是在动态生成数据的真实场景中。使用我想要检测的setInterval函数号增量更新跨度值。

我正在采取的步骤 - 是否会对我的代码无效的原因提出一些建议？

对于ID为“minutes”的所有元素＆lt; - 这些将是我的span元素
获取ID
检测来自步骤2的所有元素的任何更改
检测到更改时，获取span元素值
检查跨度值是否大于00，即01（这实际上是一个分钟值）
如果满足步骤5中的条件，则应用css
如果未满足步骤5中的条件，则删除css

$('[id*="minutes"]').each(function() {
    spanid = $(this).attr('id');

    console.log(spanid);

    $("#"+spanid).on('change',function(){

        spanval = $(this).text();
        id = $(this).attr('id').charAt(0);

        if(spanval > 00) {
            $('#results').text(span);

            $("#"+id+"-wt-html").css({"background":"#FFE95B", "color":"red"});
        } else {
            $("#"+id+"-wt-html").removeAttr("style")
       }
    });
});

示例HTML

<td id="9-wt-html">
<div id="9-wt-ajax">
<span id="9-hours">00</span>:
<span id="9-minutes">15</span>:
<span id="9-seconds">12</span>
</div>
</td>

上面的span元素是在ajax调用之前使用下面的固定脚本创建的：

for (var key in skills_arr) {
//console.log(skills_arr[key]+" - "+key);
$('#Table > tbody:last-child').append('<tr><td>'+skills_arr[key]+'</td><td id="'+key+'-cw-html"><div id="'+key+'-cw-ajax"></div></td><td id="'+key+'-aa-html"><div id="'+key+'-aa-ajax"></div></td><td id="'+key+'-wt-html"><div id="'+key+'-wt-ajax"><span id="'+key+'-hours">00</span>:<span id="'+key+'-minutes">00</span>:<span id="'+key+'-seconds">00</span></div></td><td id="'+key+'-op-html"><div id="'+key+'-op-ajax"></div></td></tr>');
}

Answer 1

好的，我根据我的理解在下面创建了snippet。

另外，想强调以下几点。

对于span元素，我们无法监听change事件。代替，   以下代码将监听DOMSubtreeModified事件。

另外，我们可以直接监听元素的事件   $('[id*="minutes"]').on('DOMSubtreeModified', function(){})如果   元素存在于此行之前。

否则，我们必须从parent或document收听同样的内容   如下所示。

$('#Table').on('DOMSubtreeModified', '[id*="minutes"]', function() {
    var span = $(this);
    var spanValue = parseInt(span.text());
    var id = span.attr('id').charAt(0);
    if(spanValue > 0) {
            //$('#results').text(span); // Not sure what is this?

            $("#"+id+"-wt-html").css({"background":"#FFE95B", "color":"red"});
    } else {
            $("#"+id+"-wt-html").removeAttr("style")
    }
});

var skills_arr = {
  '9': 'some value here'
};

for (var key in skills_arr) {
$('#Table > tbody:last-child').append('<tr><td>'+skills_arr[key]+'</td><td id="'+key+'-cw-html"><div id="'+key+'-cw-ajax"></div></td><td id="'+key+'-aa-html"><div id="'+key+'-aa-ajax"></div></td><td id="'+key+'-wt-html"><div id="'+key+'-wt-ajax"><span id="'+key+'-hours">00</span>:<span id="'+key+'-minutes">00</span>:<span id="'+key+'-seconds">00</span></div></td><td id="'+key+'-op-html"><div id="'+key+'-op-ajax"></div></td></tr>');
}

setTimeout(function(){
  $('#9-minutes').text('15');
  $('#9-seconds').text('12');
}, 3000);

setTimeout(function(){
  $('#9-minutes').text('00');
  $('#9-seconds').text('10');
}, 6000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="Table">
  <tbody>
  </tbody>
</table>
<p>Results:</p>
<div id="#results">
</div>

Answer 2

它可能无法正常工作的主要原因是因为你将div包含在td中。你需要将它们包含在div中才能工作：

<div id="9-wt-html">
  <div id="9-wt-ajax">
    <span id="9-hours">00</span>:
    <span id="9-minutes">15</span>:
    <span id="9-seconds">12</span>
  </div>
</div>

然后在你的jQuery代码中，你需要将span文本转换为integre to work：

$('[id*="minutes"]').each(function() {
  spanid = $(this).attr('id');

  console.log(spanid);

  $("#" + spanid).on('change', function() {

    spanval = parseInt($(this).text());
    id = $(this).attr('id').charAt(0);

    if (spanval > 00) {
      //$('#results').text(span); // ?where is span variable?

      $("#" + id + "-wt-html").css({
        "background": "#FFE95B",
        "color": "red"
      });
    } else {
      $("#" + id + "-wt-html").removeAttr("style")
    }
  });
});

这是JSFiddle

动态检测对span元素

2 个答案: