Question

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

此图像标签具有多个ID，即blah1和one

出于不同的目的，我需要这两个ID。因此，在不更改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，如上所述。

Answer 1

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

但是，这将选择描述中给定的元素，但仅（如果ID与您发布的ID完全相同）。如果交换两个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的评论中指出的那样，以下内容将达到相同的结果，并说明ID发生了变化，但仍包含不同的值“一个” ...

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

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

Answer 2

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

您可以使用逗号分隔列表选择器。

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

2 个答案: