时间戳

首页 > 解决方案 > 如何使用 JQuery 更改图像的“src”（具有多个 ID）

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

问题描述

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

此图像标签有多个 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，如上所述。

标签： javascriptjqueryhtmlsrc

解决方案

您可以选择具有多个 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 将返回任何具有 value 的 ID 属性的元素blah1 one。如果超过 1 个，那么它将全部选择并修改它们。知道如何按属性值进行选择有时很方便，但这是一个不好的例子。

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

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

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

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

推荐阅读