如何在不复制的情况下存储字符串？

Question

有 2 个卡片面板，当我将鼠标悬停在卡片上时，我想更改卡片的图像，然后当我离开它时，我想回到初始图像。

第一次它适用于每个图像，但是当我第二次尝试悬停时，它会复制我存储路径的字符串..

HTML 代码

<div class="col-lg d-flex justify-content-center mb-4">
                        <div class="card border-0"">
                            <img src="img/slide-1.jpg" class=" card-img-top" alt="...">
                            <div class="card-body">
                            <h5 class="card-title">Image 1</h5>
                            </div>
                        </div>
                    </div>
<div class="col-lg d-flex justify-content-center mb-4">
                        <div class="card border-0"">
                            <img src="img/slide-1.jpg" class=" card-img-top" alt="...">
                            <div class="card-body">
                            <h5 class="card-title">Image 2</h5>
                            </div>
                        </div>
                    </div>

JQUERY 代码

(function ($) {
    "use strict"; // Start of use strict
    var image_product;
    var image_product_path="/Users/paul/Desktop/Site/";
    $(".card-img-top").on({
        mouseenter: function () {
            image_product = $(this).attr("src");
            $(this).attr("src","/Users/paul/Desktop/Site/img/slide-3.jpg");
            
        },
        mouseleave: function () {
            $(this).attr("src",image_product_path+image_product);
        }
    });

  
  })(jQuery); // End of use strict

当我尝试将鼠标悬停在卡片上时第二次触发的错误： [Error] Not allowed to load local resource: file:///Users/paul/Desktop/Site//Users/paul/Desktop/Site/img/slide-1.jpg

当我尝试将鼠标悬停在卡片上时第三次触发的错误： [Error] Not allowed to load local resource: file:///Users/paul/Desktop/Site//Users/paul/Desktop/Site//Users/paul/Desktop/Site//Users/paul/Desktop/Site/img/slide-1.jpg 等等

Answer 1

请检查链接 https://stackoverflow.com/a/18032363/3526623

上面链接中没有Jquery的解决方案

function hover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}

function unhover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}


<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />

Answer 2

这是src 属性和您的image_product 变量在不同阶段包含的内容：

Phase	src	image_product
before first run	img/slide-1.jpg	undefined
first mouseenter	/Users/paul/Desktop/Site/img/slide-3.jpg	img/slide-1.jpg
first mouseleave	/Users/paul/Desktop/Site/img/slide-1.jpg	img/slide-1.jpg
2nd mouseenter	/Users/paul/Desktop/Site/img/slide-3.jpg	/Users/paul/Desktop/Site/img/slide-3.jpg
2nd mouseleave	/Users/paul/Desktop/Site/Users/paul/Desktop/Site/img/slide-1.jpg	/Users/paul/Desktop/Site/img/slide-3.jpg

在您的处理程序函数中，当鼠标进入时，您会继续将 src 中的任何内容存储到 image_product 中。

您第二次使用鼠标进入时，image_product 已经包含完整路径，但在您的 mouseleave 函数中，您每次都在前面添加路径。

Answer 3

有 n 个卡片面板，我想更改卡片的图像 当我将鼠标悬停在卡片上时，当我离开它时，我想回到 初始图像。

将原始图像设置为数据属性，然后在鼠标移出时将其切换回来。

(function($) {
  $(".card-img-top").on({
    mouseenter: function() {
      $(this).data('original', $(this).attr("src"));
      $(this).attr("src", "https://via.placeholder.com/300/09f/000.png");
    },
    mouseleave: function() {
      $(this).attr("src", $(this).data('original'));
    }
  });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-lg d-flex justify-content-center mb-4">
  <div class="card border-0">
    <img src="https://via.placeholder.com/300/09f/fff.png" class=" card-img-top " alt="... ">
    <div class="card-body ">
      <h5 class="card-title ">Image 1</h5>
    </div>
  </div>
</div>

如果您想为每张不同的卡片使用不同的图像，请将其设置为数据属性。

(function($) {
  $(".card-img-top").on({
    mouseenter: function() {
      $(this).data('original', $(this).attr("src"));
      $(this).attr("src", $(this).data('hover-image'));
    },
    mouseleave: function() {
      $(this).attr("src", $(this).data('original'));
    }
  });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-lg d-flex justify-content-center mb-4">
  <div class="card border-0">
    <img src="https://via.placeholder.com/100/09f/fff.png" data-hover-image="https://via.placeholder.com/100/09f/000.png" class=" card-img-top " alt="... ">
    <div class="card-body ">
      <h5 class="card-title ">Image 1</h5>
    </div>
  </div>
</div>

<div class="col-lg d-flex justify-content-center mb-4">
  <div class="card border-0">
    <img src="https://via.placeholder.com/100/07f/aaa.png" data-hover-image="https://via.placeholder.com/100/05f/333.png" class=" card-img-top " alt="... ">
    <div class="card-body ">
      <h5 class="card-title ">Image 2</h5>
    </div>
  </div>
</div>