画像をクリックすると拡大します。もう一度クリックすると最小化します

-1

私は画像をクリックする必要があるウェブサイトを作っています。画像をクリックすると、画面の中央に拡大表示されます。もう一度クリックすると、再び小さくなり、その場所に戻ります。画像をクリックすると拡大します。もう一度クリックすると最小化します

$(document).ready(function() { 
 
    $("#header").load("header.html .header"); 
 
    $("#footer").load("footer.html .footer"); 
 

 
    $("body").on('click', function(){ 
 

 
     if(!$(".img1, .img2").hasClass('enlarged')){ 
 

 
      $(".img1, .img2").on('click',function(){ 
 
        $(this).addClass('enlarged'); 
 
      }); 
 
     }else{ 
 
      $("body").on('click', '.enlarged', function(){ 
 
        $(this).removeClass('enlarged'); 
 
      }); 
 
     } 
 

 
    }); 
 
});

.enlarged{ 
 
    position:absolute; 
 
    z-index:2; 
 
    width:500px; 
 
    height:600px; 
 
    top:-10%; 
 
    left:300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container" class="container"> 
 
    <aside class="aside"><img src="fotos/foto1.JPG" id="img1" class="img1" style="transform:rotate(90deg);"/><img src="fotos/foto2.JPG" class="img2" style="transform:rotate(90deg);"/></aside> 
 
    <div class="box"></div> 
 
</div>

私の現在のスクリプトは動作しますが、非常にグラグラです。それは一度拡大するだけで、トリプルクリックする必要があります。

私はすでにそれについて前にquestionを作っていましたが、更新した後に誰も答えませんでした。

また、スタックオーバーフローでイメージを追加する方法がわからない場合は、スニペットを作成しました。

出典

2017-08-20 FllnAngl

あなたのクリックハンドラは実際にあなたが望むロジックを実行していません。他のクリックハンドラを割り当てるだけです。さらにクリックすると、必要なロジックを実行しているだけでなく、クリックハンドラをさらに割り当てます。数回のクリックの後、これは完全に奇妙になるでしょう。

あなたは自分のターゲット要素のためのクリックハンドラたい：

$("body").on('click', '.img1, .img2', function(){ 

});

このハンドラは、ページ上の任意の.img1や.img2のために呼び出されますが。

$(this).toggleClass('enlarged');

出典

2017-08-20 19:24:35 David

ようこそ！ありがとうございました！私は忙しかったので、申し訳ありません。私はあなたのものに近かった。私が持っていたものは働いていなかったからです。私は非論理的なことをやり始めた。 toggleClassが何の理由もなく動作しなくなる前に。今それはそうする。再度、感謝します！ ^^ – FllnAngl

物事の多くは、あなたのコード内で起こっている：

あなたが最初だけのクリックハンドラを追加

if (!$(this).hasClass('enlarged')) { 
    $(this).addClass('enlarged'); 
} else { 
    $(this).removeClass('enlarged'); 
}

あるいは、さらに簡単：このハンドラの内部では、あなたのロジックを実施body要素。つまり、あなたが最初に体をクリックすると、あなたの条件に入ります。最初のifでは別のクリックハンドラを追加しましたが、現在は.img1, .img2にあります。反対の（enlargedクラスを削除する）ことは、body要素であり、.img1, .img2要素ではありません。

いくつかのアドバイス：

のみを使用して1クラスでは、個人的に私は多分、今の関連BEMの大ファンではない拡大状態
を切り替えます。
JSの懸念を分割します。私は正しい方向にあなたを指すように

に、この動作のためのコードのビットをプラグインを作成します。

var $elements = $('.enlarge-img'); 

// in this case not very relevant, but a good habit to have 
// a method to instantiate 
function initialize() { 
    addEventListeners(); 
} 

// adding event listeners 
function addEventListeners() { 
    $elements.on('click.namespace', handleClick); 
    $('body').click('click.namespace', handleClickBody); 
} 

// You might want to handle clicks on the <body> to remove 
// the enlarged state of any image 
function handleClickBody(event) { 
    $elements.removeClass('enlarge-img--enlarged');  
} 

// If you click an image, you want to toggle the enlarged state class 
function handleClick(event) { 
    event.preventDefault(); // not necessary on a <img/> but needed if you use a link 
    $(event.target).toggleClass('enlarge-img--enlarged`); 
} 

initialize();

がうまくいけば、これは再利用可能なコードを作成するための正しい方向にあなたを助けます。ハッピーコーディング！

出典

2017-08-20 19:41:14 meavo

こんにちは、遅く返事を申し訳ありません。私は、 '$ elements 'という行が何であるか疑問に思っていました。on（ 'click.namespace'、handleClick）; 'mean？より具体的には、$要素とは何か、なぜ関数の代わりにhandleClickですか？私はまだあなたがハハを推測していたので、まだ学生です。まだ学校でjqueryを持っていない。 – FllnAngl

'$ elements'が1行目に設定されています。基本的に特定のクラスのすべての要素を選択します。 '$ elements.on（ 'click.namespace、handleClick）;'は、選択された要素にイベントリスナーを追加し、 'handleClick'関数を参照します。したがって、ユーザーが選択された要素の1つをクリックするたびに、 'handleClick'メソッドが呼び出されます。 – meavo

画像をクリックすると拡大します。もう一度クリックすると最小化します

答えて

関連する問題