如何使用 JQuery 更改图像的“src”（具有多个 ID）答案

【问题标题】：How to change "src" of a image (with multiple ID's) using JQuery如何使用 JQuery 更改图像的“src”（具有多个 ID）
【发布时间】：2019-05-25 14:35:03
【问题描述】：

我一直在尝试使用jquery 更改图像的src 属性

这个图片标签有多个ID，即blah1和one

我需要这两个 ID 用于不同的目的。那么在不更改或删除 ID 的情况下，我该如何实现呢？

我试过了，但没用。

这是我的HTML

<div class="col-md-3 col-sm-6 col-6 ad-image">
       <label for="file1">
             <img id="blah1 one" src="http://placehold.it/500" alt="..." class="img-thumbnail">
             <input type="button" value="Remove Photo" style="margin-top: 5px;" class="btn btn-danger btn-sm" id="image-remove-btn-1">
             <small id="textCount" class="form-text text-center bold">Thumbnail</small>
       </label>
 </div>

这是我的jquery

    <script type="text/javascript">
                function showImages() {
                    $("#one").attr("src", "http://placehold.it/200");
//                    $(':input').css('border', '1px solid red');
                }
            </script>

但它不起作用。 它只适用于一个 ID，但我实际上是 2 个 ID，如上所述。

【问题讨论】：

HTML id 属性中不允许有空格。我们无法修复没有损坏的东西。如果您需要为同一个元素设置多个 id，则存在更大的问题。
^ 一个元素有多个 id 是没有意义的。一个id就够了
为什么需要两个id？也许如果您发布您的问题，我们可以为您提供替代方案:)。

标签： javascript jquery html src

【解决方案1】：

您可以选择具有多个 ID 的元素，但它充满了问题并且很容易损坏。这也是非常糟糕的做法，因为它违反了明确定义和预期的标准。

但是，这将选择您描述中给出的元素，但仅如果 ID 与您发布的完全相同。如果交换 2 个 ID 值，那么这将停止工作。

$("[id='blah1 one']").attr("src", "http://placehold.it/200");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<img id="blah1 one" />

该行 JS 将返回 ID 属性值为blah1 one 的任何元素。如果超过 1 个，那么它将全部选择并修改它们。知道如何按属性值进行选择有时很方便，但这是一个不好的例子。

实际上，您应该解决实际问题，即一个元素有 2 个 ID 值。今天解决这个问题并不意味着它明天仍然有效。

注意：正如 Taplar 在 cmets 中指出的那样，以下将达到相同的结果，并且会考虑 ID 的变化，但仍包含不同的值“one”... p>

$("[id~='one']")

这要可靠得多，但我仍然说应该解决实际问题，因为如果你现在做一些根本不正确的事情，未来会发生什么。

【讨论】：

您可能还提到[id~='one'] 能够逐字选择属性，因此如果位置发生变化，它仍然可以工作。但我同意，更大的问题需要解决。属性选择器的性能不如 id 查找。
不错的技巧。 :) 这意味着$( '[id*="one"]' ) 也可以工作。
@Shilly *='one' 也将匹配 onetime，因为它是部分字符串，而不是整个单词
虽然两者都是正确的，但我会回避它们而不是我提出的答案，因为它们可以匹配其他值。这一切都太可怕了：p
~= 不会匹配其他值。这是一个单词匹配，所以值必须是它自己的，或者只有一个字符串终止符或两边的空格。除非您的意思是可能匹配具有相同 ID 的其他元素。（这将是另一个问题；））

【解决方案2】：

 function showImages() {
      $("#one, #two, #three").attr("src", "http://placehold.it/200");
 }

你可以给出一个用逗号分隔的列表选择器。

【讨论】：