1

次の静的テーブルを使用して、毎週のスケジュールを更新します。

<table>
  <tr class="live gm fsp">
    <td>Oct. 7</td>
    <td>12:30 pm</td>
    <td class="prog">Show 1</td>
    <td>Team A v Team B</td>
    <td class="tv-logo"></td>
  </tr>
  <tr class="gm dtv">
    <td>Oct. 7</td>
    <td>4 pm</td>
    <td class="prog">Show 2</td>
    <td>Team C v Team D</td>
    <td class="tv-logo"></td>
  </tr>
  <tr class="usa gm pnc">
    <td>Oct. 7</td>
    <td>6 pm</td>
    <td class="prog">Show 3</td>
    <td>Team E v Team F</td>
    <td class="tv-logo"></td>
  </tr>
  <tr class="gm pnc">
    <td>Oct. 7</td>
    <td>8 pm</td>
    <td class="prog">Show 3</td>
    <td>Team E v Team F</td>
    <td class="tv-logo"></td>
  </tr>
</table>

要素のclass属性は、その子要素<tr>の内部 HTML を決定します。内側の HTML は、学生のテレビ チャンネルのロゴに<td class="tv-logo"></td>リンクされているはずです。<img/>imagesrcおよびalt(その にも使用しますtitle) 属性は、次のオブジェクトに含まれています。

var networkClass = {
  'fsp' : {
    'src' : '/images/page-items/fsp.png',
    'alt' : 'First Student Productions'
  },
  'dtv' : {
    'src' : '/images/page-items/dtv.png',
    'alt' : 'Digital Travel Vlog'
  },
  'pnc' : {
    'src' : 'http://4.bp.blogspot.com/-i9U1bdKwzZk/UR3WRV2vDsI/AAAAAAAAAjw/FqBP37bYf5Y/s100/BMW_logo_black_white.png',
    'alt' : 'Production New Cinema'
  },
  'usa pnc' : {
    'src' : 'http://www.qservice.ro/assets/images/brands/slider_16.png',
    'alt' : 'Production New Cinema'
  }
}

このクラスusaは、対応<tr>するテレビ チャンネルのロゴの白いバージョンを必要とする単色の背景を持つように対応するを設定します。

ここ(またはhttp://jsfiddle.net/3wGmR/1/ ) にある回答を使用すると、値が 2 つではなく単一の値を持つ場合にのみクラスを照合できます。オブジェクトを使用して属性を設定しながら、内部<img/>HTMLを設定するにはどうすればよいですか? <td class="tv-logo"></td>どんな助けやアドバイスも大歓迎です！

4

3 に答える 3

0

試す

var $trs = $('table tr[class]');
$.each(networkClass, function (key, attrs) {
    var clazz = '.' + key.split(/\s+/).join('.');
    $trs.filter(clazz).find('.tv-logo').append($('<img />', attrs))
})

デモ:フィドル

于 2013-10-07T10:51:14.660 に答える
0

これを試してください。,デモ

$('tr[class]').each(function() {
var cls = this.className.split(' ');

var f = $.grep(cls, function(value, i) {
    return k.indexOf(value) > -1;
})[0];

if (f) {        
    this.children[4].innerHTML = '<img src="'+compClass[f].src+'" alt="'+compClass[f].alt+'"/>';
}
});
于 2013-10-07T10:50:51.920 に答える
0

のキーnetworkClassが有効な CSS セレクター.isである場合は、問題の要素がそれらを満たしているかどうかを判断するために使用でき、この方法で探している結果に到達できます。

キーはセレクターではありませんが、空白で区切られた CSS クラス名のリストであると仮定できれば、それらをセレクターに変換するのは簡単です。

var key = "pnc usa";
var selector = key.replace(/(^|\s+)(\S+)/g, ".$2"); // ".pnc.usa"

したがって、これを書くことができます：

$('tr[class]').each(function() {
    var $tr = $(this);
    $.each(networkClass, function(key, attributes) {
        var selector = key.replace(/(^|\s+)(\S+)/g, ".$2");
        if ($tr.is(selector)) {
            $tr.children(".tv-logo").append($("<img>", attributes));
            break;
        }
    });
});

ただし、ここで詳細に注意を払う必要があります:.fooは厳密に特定性の低いセレクターで.foo.barあり、最初に一致したセレクターが結果を決定するため、より具体的なセレクターが常に特定性の低いセレクターの前に表示されるように注意する必要があります。networkClass物体：

var networkClass = {
  // this
  'pnc usa' : {
    'src' : '/images/page-items/pnc-white.png',
    'alt' : 'Production New Cinema'
  }
  // must appear before this
  'pnc' : {
    'src' : '/images/page-items/pnc.png',
    'alt' : 'Production New Cinema'
  },
}
于 2013-10-07T10:49:02.237 に答える