如何在不復制字串的情況下存盤字串？

有 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>

查詢代碼

(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 ：等等

uj5u.com熱心網友回復：

有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>

uj5u.com熱心網友回復：

以下是src屬性和image_product變數在不同階段所包含的內容：

在你的處理器的功能，你保持存盤無論是在src進入image_product當滑鼠進入。

第二次使用滑鼠輸入時，image_product已經包含完整路徑，但在您的mouseleave函式中，您每次都在前面添加路徑。

uj5u.com熱心網友回復：

請檢查鏈接 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" onm ouseover="hover(this);" onm ouseout="unhover(this);" />

標籤：javascript html 查询

上一篇：在jquery選擇器中將元素名稱與屬性名稱連接起來

下一篇：無限Ajax滾動：如果最后隱藏加載更多按鈕的父容器