Was mache ich falsch? Ich versuche, ein Bild größer und kleiner auf einen Klick mit jQuery

Question

Ich versuche, ein Bild größer zu machen, wenn ich auf einen Link klicken, aber es wird nicht funktionieren.

Was mache ich falsch?

JQUERY:

$(document).ready(function(){ 
    $('a, large').click(function(){ 
    $("img").animate({width: "300px"}); 

    }); 

    $('a, small').click(function(){ 
    $("img").animate({width: "75px"}); 
    }); 
}); 

HTML:

<center> 
    <img src="TCRlogo.png"/></br> 
    <a href="#" id="large">Large</a> - <a href="#" id="small">Small</a> 
</center> 

Answer 1

Ihre Wähler ist falsch. Es sollte wie #id sein. Bitte überprüfen Sie das folgende Snippet für mehr Verständnis.

$(document).ready(function(){ 
 
    $('a#large').click(function(){ 
 
    $("img").animate({width: "300px"}); 
 

 
    }); 
 

 
    $('a#small').click(function(){ 
 
    $("img").animate({width: "75px"}); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<center> 
 
<img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300"/></br> 
 
<a href="#" id="large">Large</a> - <a href="#" id="small">Small</a> 
 
</center>

Answer 2

check demo

JQUERY:

$(document).ready(function(){ 
    $('#large').click(function(){ 
    $("img").animate({width: "300px"});  
    }); 

    $('#small').click(function(){ 
     $("img").animate({width: "75px"}); 
    }); 
}); 

HTML:

<center> 
<img src="TCRlogo.png"/></br> 
<a href="#" id="large">Large</a> - <a href="#" id="small">Small</a> 
</center> 

Answer 3

versuchen diese

$('#large').click(function(){ 
    $(".img1").animate({width: "300px"}); 
}); 

$('#small').click(function(){ 
    $(".img1").animate({width: "70px"}); 
}); 

Answer 4

Versuchen Sie Folgendes:

$('#small').click(function(){ 
    ... 
    }); 

und

$('#large').click(function(){ 
... 
    }); 

Answer 5

versuchen, diese

$(document).ready(function(){ 
$('#large').click(function(){ 
    $("img").animate({width: "300px"}); 
    }); 
$('#small').click(function(){ 
    $("img").animate({width: "75px"}); 
}); 
});