3

底线：

我无法检索多个数据属性的值并将它们作为子元素的文本插入。

细节：

我有一个包含特定数量的三种形状（球体、立方体、金字塔）的table每个“桶”，它们存储在s 中。对于每个形状，我都有一个对应的 s 。选中某个形状时，该形状中大于 0 的 s 会突出显示。但是，我也试图检索每个选定形状的数字并将其显示在每个元素的元素中（即“金字塔：300，立方体：50”），这是我一直没有成功的。trdata-attributeullitrtd.contentstr

这是 HTML -

<ul>
    <li data-shape="spheres">spheres</li>
    <li data-shape="cubes">cubes</li>
    <li data-shape="pyramids">pyramids</li>
</ul>

<table>
    <tr data-spheres="380" data-cubes="0" data-pyramids="200"><td>bucket 1</td><td class="contents">no shapes selected</td></tr>
    <tr data-spheres="0" data-cubes="90" data-pyramids="0"><td>bucket 2</td><td class="contents">no shapes selected</td></tr>
    <tr data-spheres="100" data-cubes="20" data-pyramids="400"><td>bucket 3</td><td class="contents">no shapes selected</td></tr>
    <tr data-spheres="500" data-cubes="110" data-pyramids="0"><td>bucket 4</td><td class="contents">no shapes selected</td></tr>
</table>

和 JS（第 22 行是我遇到问题的地方） -

(function() {
//store tr elements
var buckets = $('tr');

  $('li').click(function () {
    //toggle checked class OK
    $(this).toggleClass('checked');
    //reset classes and .contents text OK
    $(buckets).removeClass('active');
    $('td.contents').text('no shapes selected');
    //map the shape data attribute for all li elements 
    //with class '.checked' OK
    var checkedShapes = $('.checked').map(function() {
        return $(this).data('shape');
    });
    //for each checked shape, filter tr elements with 
    //more than 0 of that shape OK 
    $.each(checkedShapes, function( index, value ) {
      var filteredBuckets = $(buckets).filter(function() {
        return $(this).data(value) > "0";
      });
      //add .active class to those tr elements OK
      $(filteredBuckets).addClass('active');
      //get number of checked shapes (i.e. "pyramids: 300, cubes: 50") 
      //and display in td.contents DOESN'T WORK
      $('tr.active td.contents').text($(this).parent('tr').data(value));
    });
  });

})();

还有一个 jsFiddle：http: //jsfiddle.net/a8gtrn63/33/

根据我在文档中的理解.data()，这应该是检索选定的数据属性，但事实并非如此。我认为参考可能存在问题value，但我无法看到它。非常感谢任何输入。

4

2 回答 2

1

$(this) 指的是 $.each 循环而不是文本，所以我通过遍历元素来修复它，然后使用 $(this)：

(function() {
//store tr elements
var buckets = $('tr');

  $('li').click(function () {
    //toggle checked class OK
    $(this).toggleClass('checked');
    //reset classes and .contents text OK
    $(buckets).removeClass('active');
    $('td.contents').text('no shapes selected');
    //map the shape data attribute for all li elements 
    //with class '.checked' OK
    var checkedShapes = $('.checked').map(function() {
        return $(this).data('shape');
    });
    //for each checked shape, filter tr elements with 
    //more than 0 of that shape OK 
    $.each(checkedShapes, function( index, value ) {
      var filteredBuckets = $(buckets).filter(function() {
        return $(this).data(value) > "0";
      });
      //add .active class to those tr elements OK
      $(filteredBuckets).addClass('active');
      //get number of checked shapes (i.e. "pyramids: 300, cubes: 50") 
      //and display in td.contents DOESN'T WORK
      $('tr.active td.contents').each(function(){
         $(this).text($(this).parent('tr').data(value));
      });
    });
  });

})();
于 2014-08-19T18:50:56.297 回答
0

这就是您的代码应该看起来的样子：

(function() {
//store tr data-attributes
var buckets = $('tr');

  $('li').click(function () {
    //toggle checked class
    $(this).toggleClass('checked');
    //reset classes and .contents text
    $(buckets).removeClass('active');
    $('td.contents').text('no shapes selected');
    //map the shape data attribute for all li elements with class '.checked'
    var checkedShapes = $('.checked').map(function() {
        return $(this).data('shape');
    });
    //for each checked shape, filter tr elements with more than 0 of that shape
    $.each(checkedShapes, function( index, value ) {
      var filteredBuckets = $(buckets).filter(function() {
        return $(this).data(value) > "0";
      });
      //add .active class to those tr elements
      $(filteredBuckets).addClass('active');
      //get number of checked shapes and display in td.contents
      //$('tr.active td.contents').text($(this).parent('tr').data(value));
        $(filteredBuckets).each(function() {
            var currentText = $($(this).find("td")[1]).text();
            if (currentText.indexOf(":") === -1) {
                $($(this).find("td")[1]).text(value + ": " + $(this).data(value));
            } else {
                $($(this).find("td")[1]).text($($(this).find("td")[1]).text() + ", " + value + ": " + $(this).data(value));            }
        });
    });
  });

})();

说明：您需要迭代filteredBuckets并为每个元素设置所需的文本。如果它已经有一些形状数据，那么我们追加新的形状数据，如果没有以前的形状数据，那么我们将旧文本替换为新的形状数据。

于 2014-08-19T18:39:52.513 回答