jQuery - 将多个单词更改为多个图像

Question

我有一个 div，其中写有一些平台，我想让 jQuery 用匹配的图像替换每个单词。 Android 将成为 Android 图标，PS4 将成为 PS4 图标，等等。

HTML 不是列表，多个文本字符串位于一个 div 内。

$(".field-content").each(function() {
  if ($(this).children().length == 0) {
    var newHTML = $(this).html().replace('Firefox', '<img class="markdown-img" src="index.php?/attachments/get/6049" alt="" width="40">');
    $(this).html(newHTML);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field-content">Xbox , Android, Chrome, Firefox</div>

发生的情况是，如果 jQuery 运行，它会用图像替换整个 div，并且不会找到多个单词/图像来替换。

知道如何运行它来用图标替换 Xbox，如果 PS4 也存在，则用图标替换 PS4？

Answer 1

你的意思是这样的吗？ div 的子级中没有 HTML。这是一个文本字符串

var imgs = {
    "Xbox": "https://findicons.com/files/icons/382/console/128/xbox_360_zoomed_icon.png",
    "Android": "http://i.istockimg.com/file_thumbview_approve/25435190/3/stock-photo-25435190-green-android-with-shoping-bag.jpg",
    "Chrome": "chrome.gif",
    "Firefox": "firefox.gif",
    "PS4": "ps4.gif"
  }
$(".field-content").each(function() {
  var newHTML = [];
  $.each(
    $(this).text().split(","), // you were for sure missing this
    function(_, val) {
      val = $.trim(val);
      if (val.length > 0) {
        newHTML.push(val + ': <img class="markdown-img" src="' + imgs[val] + '" alt="Image of '+val+'">');
      }
    }
  );
  //    console.log(newHTML)
  if (newHTML.length > 0) $(this).html(newHTML.join("&nbsp"));
})

.markdown-img { width:40px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field-content">Xbox , Android, Chrome, Firefox</div>
<div class="field-content">Android, Chrome, PS4</div>