Как создать изображение в ссылку, которая ссылается на другое изображение, используя javascript?

Question

Это то, что я до сих пор, и я не могу заставить его работать ..

Это изображение, которое имеет id="hap_text", что я хочу, чтобы отображаться при нажатии на другое изображение.

<script> 
$(function() { 
    $('.touch_bg #touch_hap').click(function(e) { 
     e.preventDefault(); 
     $('#hap_text').toggleClass('hidden'); 
    }); 
}); 
</script> 

<div class="container touch_bg"> 
    <div> 
     <a href="#"><img id="touch_hap" src="img/info/lefttouch.png"></a> 
     <img id="hap_text" class="hidden" src="img/info/habitattext.png"> 
    </div> 
</div> 

и КСС:

.hidden { 
    display: none; 
} 

Answer 1

Uncaught ReferenceError: $ is not defined

Не забудьте включить JQuery. В противном случае ваш код выглядит отлично.

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 

---

$(function() { 
 
    $('.touch_bg #touch_hap').click(function(e) { 
 
    e.preventDefault(); 
 
    $('#hap_text').toggleClass('hidden'); 
 
    }); 
 
});

.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container touch_bg"> 
 
    <div> 
 
    <a href="#"> 
 
     <img id="touch_hap" src="img/info/lefttouch.png"> 
 
    </a> 
 
    <img id="hap_text" class="hidden" src="img/info/habitattext.png"> 
 
    </div> 
 
</div>