Changing the image inside of a DIV onclick of another DIV

Question

So, it has been a while since I've had to do anything jquery and I'm having trouble recalling the simplest of tasks.

I have a DIV with a default image in it and I want that to change that image when I click an LI link on the page.

My question is, what does my jquery look like if I want to click 'view brown' and have it replace the default ' lboard-black ' image and so forth.

All I've really accomplished in trying to remember the syntax is show hide and toggling; Its similar to an image gallery type script I guess but much much simpler.

<style>
.lactive{display:block;}
</style>

Image Container:

<div id="StuffandThings">
<div id="lboard-black" style="display:none;" class="lactive"><img src="" /></div>
<div id="lboard-brown" style="display:none;"><img src="" /></div>
<div id="lboard-grey" style="display:none;"><img src="" /></div>
</div>

Link Container:

<ul>
<li><div class="lblack">view black</div></li>
<li><div class="lbrown">view brown</div></li>
<li><div class="lgrey">view grey</div></li>
</ul>

This is what i tried working with initially: http://jsfiddle.net/wsfy5uo2/

Answer 1

The Jquery click method would do. https://api.jquery.com/click/ Going by your code Something similar to the following might work, but you may consider using element IDs instead

$(".lblack").click(function(){
$("#StuffandThings div").hide();
$("#lboard-black").show();
});
$(".lbrown").click(function(){
$("#StuffandThings div").hide();
$("#lboard-brown").show();
});
$(".lgrey").click(function(){
$("#StuffandThings div").hide();
$("#lboard-grey").show();
});

See the fiddle https://jsfiddle.net/Ldtosmnx/

Update: There are some problems with your fiddle

• You've passed .link instead of .lboard-link as the selector
• You haven't assigned any IDs to your elements in the first place

See this fiddle for corrections http://jsfiddle.net/kw1rgv23/

Answer 2

Your click event was on wrong class. It should be .lboard-link not .link . And also use this instead of e.target to get the data-foil instead of id .

 $(document).ready(function () { $('.lboard-link').on('click', function (e) { e.preventDefault(); var id = $(this).data('foil').toLowerCase(); $('.lboard-hide').hide(); console.log(id); $('#' + id + '-lboard').show(); }); });

 .lboard-hide:not(:first-child){display:none;}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="stuffandthings"> <div id="black-lboard" class="lboard-hide">1111</div> <div id="brown-lboard" class="lboard-hide">2222</div> <div id="grey-lboard" class="lboard-hide">3333</div> </div> <ul> <li><div data-foil="Black" style="background-color: #000000;" class="lboard-link"> </div></li> <li><div data-foil="Brown" style="background-color: #8B4513;" class="lboard-link"> </div></li> <li><div data-foil="Grey" style="background-color: #cccccc;" class="lboard-link"> </div></li> </ul>

You can also test it here .