Question

我有一个功能，可以用自定义图像替换玩家头像。到目前为止，我有3个，并且已将静态替换链接构建到Chrome扩展程序中。我想做的是让函数查看外部txt文件以构建数组，这样我就可以添加新播放器，而不必每次都重新发布扩展名。我可以在文本文件中添加新的链接对。

外部replacer.txt文件为：

{
  "replaced": [
    {
      "original": "/imgs/avatar/generated/26_1114_1115_836_937_952_856_1100_904_875_863_922_840_503.png",
      "newone": "https://cbsargecom.ipage.com/imgs/FJinstead.png"
    },
    {
      "original": "/imgs/avatar/generated/15_140_118_1168_1519_574_306_982_181_125.png",
      "newone": "https://cbsargecom.ipage.com/imgs/ZXGinstead.png"
    },
    {
      "original": "/imgs/avatar/generated/26_1114_1452_1115_2092_925_1102_847_914_1126_967_1125_871_2082_2080.png",
      "newone": "https://cbsargecom.ipage.com/imgs/skelinstead.png"
    }
  ]
}

Chrome扩展程序的一部分功能是：

$.getJSON('https://cbsargecom.ipage.com/imgs/replacer.txt', function (data) {
        $.each(data, function () {
            $('a.avatarContainer img').each(function(){
                $(this).attr('src', $(this).attr('src').replace(data.replaced.original[0], data.replaced.newone[0]));
            });
        });
    });

这只会产生Uncaught TypeError：无法读取控制台中未定义的属性“ 0”。

起作用的功能是

    $('a.avatarContainer img').each(function(){
    $(this).attr('src', $(this).attr('src').replace("/imgs/avatar/generated/26_1114_1115_836_937_952_856_1100_904_875_863_922_840_503.png", "https://cbsargecom.ipage.com/imgs/FJinstead.png"));
    $(this).attr('src', $(this).attr('src').replace("/imgs/avatar/generated/15_140_118_1168_1519_574_306_982_181_125.png", "https://cbsargecom.ipage.com/imgs/ZXGinstead.png"));
    $(this).attr('src', $(this).attr('src').replace("/imgs/avatar/generated/26_1114_1452_1115_2092_925_1102_847_914_1126_967_1125_871_2082_2080.png", "https://cbsargecom.ipage.com/imgs/skelinstead.png"));
    });

Answer 1

您的索引位置错误

这将找到要替换的图像：

JsonDocument jdoc = JsonDocument.Parse("{\"a\":123}");
string json = jdoc.ToJsonString();

const dataString = `{
  "/imgs/avatar/generated/26_1114_1115_836_937_952_856_1100_904_875_863_922_840_503.png": "https://cbsargecom.ipage.com/imgs/FJinstead.png",
  "/imgs/avatar/generated/15_140_118_1168_1519_574_306_982_181_125.png": "https://cbsargecom.ipage.com/imgs/ZXGinstead.png",
  "/imgs/avatar/generated/26_1114_1452_1115_2092_925_1102_847_914_1126_967_1125_871_2082_2080.png": "https://cbsargecom.ipage.com/imgs/skelinstead.png"
}` // the data in backticks is what the file looks like

const data = JSON.parse(dataString); // this is what getJSON does for you

$('a.avatarContainer img').each(function() {
  var src = $(this).attr("src"), replace = data[src];
  if (replace) $(this).attr("src", replace);
});

这更像是您的原始代码，但是我不确定这不是您真正想要的

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="avatarContainer"><img src="/imgs/avatar/generated/26_1114_1115_836_937_952_856_1100_904_875_863_922_840_503.png" /></a>
<a class="avatarContainer"><img src="/imgs/avatar/generated/15_140_118_1168_1519_574_306_982_181_125.png" /></a>
<a class="avatarContainer"><img src="/imgs/avatar/generated/26_1114_1452_1115_2092_925_1102_847_914_1126_967_1125_871_2082_2080.png" /></a>

const data = {
  "replaced": [{
      "original": "/imgs/avatar/generated/26_1114_1115_836_937_952_856_1100_904_875_863_922_840_503.png",
      "newone": "https://cbsargecom.ipage.com/imgs/FJinstead.png"
    },
    {
      "original": "/imgs/avatar/generated/15_140_118_1168_1519_574_306_982_181_125.png",
      "newone": "https://cbsargecom.ipage.com/imgs/ZXGinstead.png"
    },
    {
      "original": "/imgs/avatar/generated/26_1114_1452_1115_2092_925_1102_847_914_1126_967_1125_871_2082_2080.png",
      "newone": "https://cbsargecom.ipage.com/imgs/skelinstead.png"
    }
  ]
}

$.each(data, function() {
  $('a.avatarContainer img').each(function(i,img) {
    var $img = $(img);
    $img.attr('src', data.replaced[i].newone)
   // simpler than 
   // var src = $img.attr('src');
   // $img.attr('src', src.replace(data.replaced[i].original, data.replaced[i].newone));
  });
});

用来自外部txt文件的链接替换图像

1 个答案: