Develop Reference

Changing the image inside of a DIV onclick of another DIV

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/

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/

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.

Getting an image overlay/class to show onclick depending on the class of a parent element

I was just assigned my first project for work and am having some trouble with the last details.
Essentially, when a user clicks a list item in a class of "answerPick" is added to the li. When the user clicks another li item to change their answer the class of "answerPick" is removed from the first choice and added to the new choice. At the end of the form, the user submits and I take all values attached to li items with a class of "answerPick".
Here is an example of the structure of one of the form questions:
<!--Section B-->
<section id="section-b" class="grid">
<div class="content-wrap">
<div class="section-question">
<img src="/Images/modules/GiftThemeHeader_418x50.jpg">
</div>
<ul class="answer-options-grid">
<li class="answer" data-url="relaxation"><img src="/Images/modules/Relaxation_200x150.jpg" class="baseimg"> <img src="/Images/modules/Check1Mobile.png" class="topimg">Relaxation</li>
<li class="answer" data-url="skincare"><img src="/Images/modules/BodyCare_200x150.jpg" class="baseimg"> <img src="/Images/modules/Check1Mobile.png" class="topimg">Body Care</li>
<li class="answer" data-url="date-night"><img src="/Images/modules/DateNight_200x150.jpg" class="baseimg"> <img src="/Images/modules/Check1Mobile.png" class="topimg">Date Night</li>
<li class="answer" data-url="at-home-spa"><img src="/Images/modules/Spa_200x150.jpg" class="baseimg"> <img src="/Images/modules/Check1Mobile.png" class="topimg">At-home spa </li>
</ul>
</div>
</section>
You'll notice I have an image called "Check1Mobile" right next to the selected image. This image is automatically hidden via .hide().
Basically what I'm trying to do is have the check image show using .show(), when the li item is clicked and is given the class "answerPick". I'm trying to only target specific instances of the class "topimg" during the click function because I use that image/class for each of the form questions.
Here is a snippet of code. I can include everything but I am a javascript scrub so it is messy, to be honest.
$jq('.answer img').click(function () {
if ((this).parent().hasClass('answerPick')) {
$jq('.topimg').show();
}
else {
$jq('.topimg').hide();
} });

Based on the piece of code you have written it should be:
$jq('.answer img').click(function () {
$jq('.topimg').hide()
if ($jq(this).parent().hasClass('answerPick')) {
$jq(this)('.topimg').show();
}
});
But I can also suggest :
$jq('.answer img').on('click', function () {
const el = $jq(this)
el.parent().find('.topimg')
el.find('.topimg').toggle(el.hasClass('answerPick'))
});
Here's a jsfiddle for live example.

jQuery 'this' following a .find click function

Need some help with this one...I have the following javascript code:
var quickSection = $('.quick-links');
var quickContent = $('.quick-links .row .inner-content')
if ( quickSection.is('*') ) {
quickContent.find("img").click(function() {
$(this).find("ul").slideDown("slow");
});
}
There are three instances of my variable quickContent. Each have a ul, img, etc. I need to display the ul that correlates with the image that is clicked. I thought the above code would do the trick, but I suppose that 'this' is also returning the '.find(img)' from the previous line. Any tips as to how I can solve this in the most efficient manner? Any help is much appreciated.
html:
<div class="quick-links block">
<div class="main-wrap container">
<div class="row">
<div class="col-sm-4 first column">
<div class="inner-content">
<h2>Admissions<a><img src="/sites/all/themes/merge/img/blue-down.png" /></a></h2>
<ul>
<li><a>Apply Now</a></li>
<li><a>Schedule a Visit</a></li>
<li><a>Student Life</a></li>
</ul>
</div><!--end inner-content-->
</div><!--end col-->
<div class="col-sm-4 second column">
<div class="inner-content">
<h2>Academics<a><img src="/sites/all/themes/merge/img/green-down.png" /></a></h2>
<ul>
<li><a>A Liberal Arts Degree</a></li>
<li><a>College of Arts & Sciences</a></li>
<li><a>College of Business</a></li>
<li><a>College of Health Sciences</a></li>
</ul>
</div><!--end inner-content-->
</div><!--end col-->
<div class="col-sm-4 third column">
<div class="inner-content">
<h2>Student Life<a><img src="/sites/all/themes/merge/img/gold-down.png" /></a></h2>
<ul>
<li><a>Campus Photo Tour</a></li>
<li><a>Student Organizations</a></li>
<li><a>Residence Life</a></li>
<li><a>Facilities</a></li>
<li><a>Food & Drink</a></li>
</ul>
</div><!--end inner-content-->
</div><!--end col-->
</div><!--end row-->
</div><!--end container-->
</div><!--end quick-links-->

this will be the image that was clicked on, not an element of quickContent. You need to go up to the container and then search down for the corresponding ul.
quickContent.find("img").click(function() {
$(this).closest(".inner-content").find("ul").slideDown("slow");
}
Or if they're both children of the same element, you can use:
quickContent.find("img").click(function() {
$(this).siblings("ul").slideDown("slow");
}

You can include img in your selector like:
var quickSection = $('.quick-links');
if (quickSection.is('*')) {
$('.quick-links .row .inner-content img').click(function() {
$(this).parents("h2").next("ul").slideDown("slow");
});
}

.parent() will do the trick, as it changes the current scope to the div containing your clicked image.
var quickSection = $('.quick-links');
var quickContent = $('.quick-links .row .inner-content')
if ( quickSection.is('*') ) {
quickContent.find("img").click(function() {
$(this).parent().find("ul").slideDown("slow");
});
}

When you attach a click handler to an element, $(this) will refer to the clicked element; so the image, in this case. Since you have multiple jQuery objects in quickContent, you'll probably have to traverse back up the the DOM tree to find the one you need. Something like:
quickContent.find("img").click(function(){
$(this).parents('.quick-links .row .inner-content').find("ul").slideDown("slow");
}
There may well be a more efficient way, depending on your exact DOM structure. For instance, the jQuery functions .next(), .prev(), or .siblings() might be useful.

toggle pictures by hovering ul li

I need it to be a javascript solution only please. Please refer to this demo.
The goal is to hover the dots on the right bottom corner and swap the images accordingly. But what it does now is showing a blank page when hovering, and the whole ul becomes vertical and goes to top left corner. What did I do wrong here???
HTML:
<div id="wrapper">
<section id="contentWrapper">
<div id="resistorContent" class="content">
<section id="resistorDetail1"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic1.jpg"></section>
<section id="resistorDetail2"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic2.jpg"></section>
<section id="resistorDetail3"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic3.jpg"></section>
<section id="resistorDetail4"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic4.jpg"></section>
<ul>
<li onMouseOver="showDetail(resistorDetail1)"></li>
<li onMouseOver="showDetail(resistorDetail2)"></li>
<li onMouseOver="showDetail(resistorDetail3)"></li>
<li onMouseOver="showDetail(resistorDetail4)"></li>
</ul>
</div>
</section>
</div>
JAVASCRIPT:
<script type="text/javascript">
var children = document.querySelectorAll('.content > section[id]')
function showDetail(target){
for (var i = 0, child; child = children[i]; i++) {
child.style.display = 'none';
}
document.getElementById(target).style.display = 'block';
}
</script>
POSSIBLE COLLIDING CSS ?:
.content section:not(:first-child) {
display: none;
}
Thank you in advance!!

TL;DR
Here is the working fiddle: https://jsfiddle.net/2qz2srqs/3/
Reason
Your code was very close, but it had a few minor issues.
The first was a copy-paste error, you had two elements with the id of resistorDetail3.
Second, your syntax for the onmouseover event was incorrect. Prefix any javascript with javascript: and ensure it has proper syntax.
Third, your showDetail method expected a string id of the element to show. In your onmouseover declaration you had showDetail(resistorDetail1) instead of showDetail('resistorDetail1').
Finally, when you javascript is referenced in the HTML, you need to make sure you load the javascript first. Just by taking a look at the developer's console you could see that it through an error "showDetail is not defined.. I switched it to No wrap - in <body> and it worked fine.
BUT I highly recommend against directly referencing javascript from your HTML. Instead, load the HTML first and then use the DOM ready event of javascript to bind your events. That will increase your load time and make it easier to switch to something like jQuery/Zepto if needed.
Full Code
HTML
<section id="contentWrapper">
<div id="resistorContent" class="content">
<section id="resistorDetail1">
<img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic1.jpg" />
</section>
<section id="resistorDetail2">
<img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic2.jpg" />
</section>
<section id="resistorDetail3">
<img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic3.jpg" />
</section>
<section id="resistorDetail4">
<img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic4.jpg" />
</section>
<ul>
<li onmouseover="javascript: showDetail('resistorDetail1')"></li>
<li onmouseover="javascript: showDetail('resistorDetail2')"></li>
<li onmouseover="javascript: showDetail('resistorDetail3')"></li>
<li onmouseover="javascript: showDetail('resistorDetail4')"></li>
</ul>
</div>
</section>
JS
var children = document.querySelectorAll('.content > section[id]');
function showDetail(target) {
for (var i = 0, child; child = children[i]; i++) {
child.style.display = 'none';
}
document.getElementById(target).style.display = 'block';
}
CSS
(unchanged)

Here's another working fiddle.
https://jsfiddle.net/2qz2srqs/4/
The issue was a couple things.
You were passing undefined vars into your onmouseover attributes. You wanted strings (I quoted them)
In JSFiddle, you don't automatically get the window scope, so you have to assign a function as a property of a window if you want to be able to hit it with an event attribute.

mouseenter/leave & mouseover/out problems

Script:
$( ".title").mouseenter(function() {
var which = $(this).index();
$('.globalnav li').find('.dropdown').hide().eq(which).show();
}).mouseleave(function() {
var which = $(this).index();
$('.globalnav li').find('.dropdown').hide().eq(which).hide();
});
Navigation:
<ul class="globalnav">
<li>
<div class="title">Home</div>
<div class="dropdown">
<div class="navlinks">
<div class="linkstitle">Title</div>
<div class="navlink">Link1</div>
<div class="navlink">Link1</div>
</div>
</div>
</li>
...
The above code is what I am using right now which does not work in Chrome as intended *I need to hold my click down to view the div. I use mouseover, it does not work properly in IE and FF.
I am also having trouble showing the associated div of the title (on title hover, show specific div) due to the nature of the coding format itself (client given code). Right now, on hovering over a title, it shows the first li's content for "navlinks".
Here's a fiddle to show you
Thanks

Why are you using the index of the .title element, if the other LI's look like that, the which variable will always be 0, and it's not the way to target the right .dropdown ?
Try something more like this
$( ".title").on('mouseenter mouseleave', function(e) {
var dropdown = $(this).closest('li').find('.dropdown').toggle(e.type=='mouseenter');
$('.dropdown').not(dropdown).hide();
});
And if you want the dropdown to be visible while hovering it, place it inside the element that triggers the mouseleave
<li>
<div class="title">
Home
<div class="dropdown">
<div class="navlinks">
<div class="linkstitle">Title</div>
<div class="navlink">Link1</div>
<div class="navlink">Link1</div>
</div>
</div>
</div>
</li>
FIDDLE