Question

底线：

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

详细说明：

每个table＆＃34;桶＆＃34;我已经tr了包含特定数量的三种形状（球体，立方体，金字塔），它们存储在data-attribute s中。我为每个形状提供了ul个相应的li s。选中形状时，会突出显示该形状超过0的tr个。但是，我还试图检索每个选定形状的数字，并将其显示在每个td.contents的{{1}}元素中（即＆＃34;金字塔：300，立方体： 50＆＃34;），这是我没有成功的。

这是HTML -

tr

和JS（第22行是我遇到麻烦的地方） -

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

和jsFiddle：http://jsfiddle.net/a8gtrn63/33/

根据我在(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)); }); }); })();的文档中的理解，这应该是检索所选的数据属性，但它不是。我认为.data()引用可能存在问题，但我很难看到它。任何意见都非常感谢。

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

})();

Answer 2

这是您的代码看起来相似的方式：

(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并为每个元素设置所需的文本。如果它已经有一些形状数据，那么我们附加新的形状数据，如果没有以前的形状数据，那么我们将旧文本替换为新的形状数据。

检索多个数据属性并将其设置为子元素的文本

2 个答案: