檢索多個數據屬性並將其設置為子元素的文本

Question

底線：

我無法檢索多個數據屬性的值並將它們作為子元素的文本插入。

細節：

我有一個table ，每個tr “桶”包含特定數量的三種形狀（球體，立方體，金字塔），它們存儲在data-attribute 。 我的每個形狀都有一個帶有相應li的ul 。 檢查形狀時，突出顯示該形狀超過0的tr s。 但是，我也試圖檢索每個選定形狀的數字，並在每個tr的td.contents元素中顯示它（即“金字塔：300，立方體：50”），這是我一直沒有成功的。

這是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參考可能存在問題，但我很難看到它。 任何輸入都非常感謝。

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並為每個元素設置所需的文本。 如果它已經有一些形狀數據，那么我們附加新的形狀數據，如果沒有以前的形狀數據，那么我們將舊文本替換為新的形狀數據。