使用javascript基于下拉菜单更改图像正在更改我的所有图像

我正在使用javascript根据下面的下拉菜单更改图像：

<script type="text/javascript">
        $(document).ready(function() {
        var pics = [
            '/pics/graphForAlbania.png?raw=true', 
            '/pics/graphForAlgeria.png?raw=true',
            '/pics/graphForAngola.png?raw=true'
        ]
        $('#picDD').change(function () {
        var val = parseInt($('#picDD').val());
        $('img').attr("src",pics[val]);
        });
        });
        
    </script>

<div class="container">
        <img src='/pics/graphForAlbania.png?raw=true'/>
        <select id="picDD">
            <option value ="0" selected>Albania</option>
            <option value ="1">Algeria</option>
            <option value ="2">Angola</option>
</select>
        </div>

$（文档）.ready（函数（）{
变量pics=[
“/pics/graphForAlbania.png？raw=true”，
“/pics/graphForAlgeria.png？raw=true”，
“/pics/graphForAngola.png？raw=true”
]
$（'#picDD'）。更改（函数（）{
var val=parseInt（$（'#picDD'）.val（））；
$（'img'）.attr（“src”，pics[val]）；
});
});
阿尔巴尼亚
阿尔及利亚
安哥拉

但我还有另一个形象：

这在前面的代码中，每次提示下拉时，该代码都会与其他图像一起更改

有没有一种方法可以在我的html代码中包含一个图像，而不必使用我编写的javascript进行更改？我是否可以在图像标记之外的其他内容中添加图像，或者我是否应该更改有关javascript的内容？

$（'img'）匹配页面上的所有图像。给它一个id或唯一类，以便您可以识别它

<script type="text/javascript">
    $(document).ready(function() {
    var pics = [
        '/pics/graphForAlbania.png?raw=true', 
        '/pics/graphForAlgeria.png?raw=true',
        '/pics/graphForAngola.png?raw=true'
    ]
    $('#picDD').change(function () {
    var val = parseInt($('#picDD').val());
    $('#pic2change').attr("src",pics[val]);
    });
    });
    
</script>

<div class="container">
    <img id='pic2change' src='/pics/graphForAlbania.png?raw=true'/>
    <select id="picDD">
        <option value ="0" selected>Albania</option>
        <option value ="1">Algeria</option>
        <option value ="2">Angola</option>
</select>
    </div>

$（文档）.ready（函数（）{
变量pics=[
“/pics/graphForAlbania.png？raw=true”，
“/pics/graphForAlgeria.png？raw=true”，
“/pics/graphForAngola.png？raw=true”
]
$（'#picDD'）。更改（函数（）{
var val=parseInt（$（'#picDD'）.val（））；
$（'pic2change'）.attr（“src”，pics[val]）；
});
});
阿尔巴尼亚
阿尔及利亚
安哥拉

有几种不同的解决方案，但它们都基于相同的概念：

指要更改的特定图像

最简单的解决方案是为图像指定一个类并引用该类，而不是

img

<script type="text/javascript">
  $(document).ready(function() {
    var pics = [
      '/pics/graphForAlbania.png?raw=true',
      '/pics/graphForAlgeria.png?raw=true',
      '/pics/graphForAngola.png?raw=true'
    ]
    $('#picDD').change(function() {
      var val = parseInt($('#picDD').val());
      $('.graph').attr("src", pics[val]);
    });
  });
</script>

<div class="container">
  <img class='graph' src='/pics/graphForAlbania.png?raw=true' />
  <select id="picDD">
    <option value="0" selected>Albania</option>
    <option value="1">Algeria</option>
    <option value="2">Angola</option>
  </select>
</div>

$（文档）.ready（函数（）{
变量pics=[
“/pics/graphForAlbania.png？raw=true”，
“/pics/graphForAlgeria.png？raw=true”，
“/pics/graphForAngola.png？raw=true”
]
$（'#picDD'）。更改（函数（）{
var val=parseInt（$（'#picDD'）.val（））；
$（'.graph'）.attr（“src”，pics[val]）；
});
});
阿尔巴尼亚
阿尔及利亚
安哥拉

我还可以链接我创建的网站，以防任何人需要查看该网站以了解问题，我会避免使用泛型类；如果页面上的图表超过1，他也会遇到同样的问题。类似于“cpugraph”的东西应该是better@Danial，我总是推荐类而不是ID，因为我在上看到的大量问题都来自于人们在同一页面上重用ID。至少对于类，有一些解决方案允许重用同一个类。因为人们是糟糕的程序员而建议效率较低的代码不是好的做法。但我没说不要上课。我说要使用更独特的类；如果页面上有4个图形，您的示例与使用的问题相同，或者如果所有图像都具有相同的类（通常情况下）。同样是一群不知道如何使用ID的人也不知道如何使用类，所以你只是建议使用一种效率较低的方法。IDs更快、更高效。