このスクリプトを一般化することは可能でしょうか？

Question

プログラミングの経験がほとんどないjQueryの新機能ですので、考慮してください。 imgelement

2）ホバー画像の画像URL - - hoverimageurl

単一の画像が含まれてい

1）の要素（）：

は、私は次の2つの変数を取る時間を節約するスクリプトを作成しました

コード：

/* Image Hover Script (Start) */ 
 
    var imgelement = "#element"; /* Element containing the original image */ 
 
    var hoverimageurl = "http://www.domain.com/image.png2"; /* Image URL of the hover image */ 
 
    
 
    jQuery(document).ready(function() { 
 
    
 
    \t /* Add CSS and a class to the original image to fix positioning and give it an identification */ 
 
    \t jQuery(imgelement + " img").addClass("originalimage"); 
 
    \t \t 
 
    \t /* Prepend hover image to the element. Set the SRC to the hover image URL */ 
 
    \t jQuery(imgelement).prepend('<img class="hoverimage" src="' + hoverimageurl + '">'); 
 
    \t 
 
    \t /* Fade out original image and fade in hover image on hover */ 
 
    \t jQuery(imgelement).hover(function() { 
 
    \t \t jQuery(imgelement + " .originalimage").stop(true).fadeTo(1000, 0); 
 
    \t \t jQuery(imgelement + " .hoverimage").stop(true).fadeTo(1000, 1); 
 
    \t }, function() { 
 
    \t \t jQuery(imgelement + " .hoverimage").stop(true).fadeTo(1000, 0); 
 
    \t \t jQuery(imgelement + " .originalimage").stop(true).fadeTo(1000, 1); 
 
    \t }); 
 
    \t 
 
    }); 
 
    /* Image Hover Script (End) */

/* Image Hover CSS (Start) */ 
 
#pix-fe .originalimage { 
 
\t position: relative; 
 
} 
 

 
#pix-fe .hoverimage { 
 
\t position: absolute; 
 
\t width: 100%; 
 
\t height: 100%; 
 
} 
 
/* Image Hover CSS (End) */

<div class="element"> 
 
    <a href="http://www.domain.com"><img src="http://www.domain.com/image1.png"></a> 
 
</div>

要素がホバリングされたときに変数hoverimageurlから与えられたホバーイメージにフェードインします。これは完全に機能しますが、私はこのスクリプトの複数のインスタンスを使用し、そうするために、必要なインスタンスごとに変数名を増やす必要があります。理想的には、変数リストとメインスクリプトの1つのインスタンスが理想的である場合、スクリプトの大部分をインスタンスごとに繰り返す必要があるため、これは非効率的です。

このコードを一般化する方法はありますか？私はthisを認識していますが、imgelementは常にimgelementという変数に対して値を参照するため、私の知る限り、これをどのように行うことができないのか分かりません。

ありがとうございます。

Answer 1

jsより信頼性が高く理解しやすいので、実際にはcssを使用してください。これは、これがjQueryプラグインについて学ぶ良い機会であり、コードをより乾燥して再利用できるようにするためにどのように活用できるかを示しています。

jQueryオブジェクトに新しいメソッドを追加するには、jQuery.fnという関数を宣言することができます。これはprototypeです。

thisは、選択した要素のコレクションにバインドされるため、APIをコレクションに適用する予定がある場合は、それぞれを呼び出す必要があります。

そこから機能に機能を追加するだけです。任意の引数が関数に渡されるので、実行時に設定を渡すことができます。ここではimg urlを渡すために使用されます。

私が使用した他の基本機能はjQuery.fn.findでした。私の目にもっと混乱させる文字列を使用するのではなく、domをトラバースできるリファレンス要素があるためです。

プラグインを実行するには、単にjQueryセレクタを作成し、新しいメソッドを呼び出すだけです。 $('#selector').hoverImage('url')

jQueryプラグインの作成の基礎を知ったので、純粋なCSSで同じ結果を達成する方法を実際に理解する必要があります。少しCSSを扱うことができない

/* 
 
* jQuery hoverImage plugin 
 
* 
 
* @param {string} url url of the hover image 
 
*/ 
 
(function() { 
 
    jQuery.fn.hoverImage = function(url) { 
 
    // loop over the element collection 
 
    this.each(function() { 
 
     // bind your functionality 
 
     var $this = $(this) 
 
     var $img = $this.find('img') 
 
     var $hover = $('<img class="hoverimage" src="' + url + '">') 
 
     
 
     $this.prepend($hover) 
 
     
 
     $this.hover(function() { 
 
     $img.stop().fadeTo(1000,0) 
 
     $hover.stop().fadeTo(1000,1) 
 
     }, function() { 
 
     $img.stop().fadeTo(1000,1) 
 
     $hover.stop().fadeTo(1000,0) 
 
     }) 
 
    }) 
 
    } 
 
})() 
 
// run your plugin 
 
$('#element').hoverImage('http://lorempixel.com/400/200/')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="element"></div>

Answer 2

何もない:)

.image-switch { 
 
    position: relative; 
 
} 
 

 
.image-switch img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    opacity: 1; 
 
    transition: opacity 1s 
 
} 
 

 
.image-switch:hover img:last-child{ 
 
    opacity: 0 
 
}

<span class="image-switch"> 
 
    <img src="http://placehold.it/200x200/FF0000"> 
 
    <img src="http://placehold.it/200x200"> 
 
</span>