Targeting issue when an item is clicked - javascript

I have a problem about targeting. I have 5 items. They have own individual values for max and min temperatures in Celsius and Fahrenheit. I have to make them, when I click individual Celsius icon, should change just their value. But now, when I click any Celsius icon, its making changes about all values and they takes the first item's value. You can see it here:
var api_key = "dd39280551e44f1bb34221739171701&q=";
var loc;
$(document).ready(function() {
// var latitude,longitude;
$.getJSON('http://ipinfo.io', function(d){
loc = d.loc.split(",");
var apiLink = "http://api.apixu.com/v1/forecast.json?key=";
var days5 = "&days=5";
var api = apiLink + api_key + loc[0] +','+ loc[1] + days5;
$.getJSON(api, function(v1) {
var tempSwapForecast = true;
var forecastdayData = v1.forecast.forecastday;
var days = forecastdayData.map(function(d) {
return d.day;
});
var maxtempc = days.map(function(maxc) {
return maxc.maxtemp_c;
});
var mintempc = days.map(function(minc) {
return minc.mintemp_c;
});
var maxtempf = days.map(function(maxf) {
return maxf.maxtemp_f;
});
var mintempf = days.map(function(minf) {
return minf.mintemp_f;
});
$('.forecasticons img').each(function(i) {
$(this).attr('src', days[i].condition.icon);
});
$('.frc-temp').each(function(i) {
$(this).html(Math.round(maxtempc[i]) + "-" + Math.round(mintempc[i]));
$('.frc-degree').click(function() {
for (var j = 0; j < $(this).length; j++) {
if(tempSwapForecast===false){
$('.frc-temp').html(Math.round(maxtempc[j]) + "-" + Math.round(mintempc[j]));
$('.frc-degree').html(" ℃");
tempSwapForecast = true;
} else {
$('.frc-temp').html(Math.round(maxtempf[j]) + "-" + Math.round(mintempf[j]));
$('.frc-degree').html("℉");
tempSwapForecast = false;
}
}
});
});
$('.forecastText').each(function(i) {
$(this).html(days[i].condition.text);
});
});
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="other-days">
<div class="forecastday">
<div class="forecasticons" >
<img class="fcicon" alt="weather-icon" src="">
</div>
<div class="forecastText"></div>
<div class="forecasttemp">
<span class="frc-temp"></span>
<a class="frc-degree" href="#">℃</a>
</div>
</div>
<div class="forecastday">
<div class="forecasticons" >
<img class="fcicon" alt="weather-icon" src="">
</div>
<div class="forecastText"></div>
<div class="forecasttemp">
<span class="frc-temp"></span>
<a class="frc-degree" href="#">℃</a>
</div>
</div>
<div class="forecastday">
<div class="forecasticons" >
<img class="fcicon" alt="weather-icon" src="">
</div>
<div class="forecastText"></div>
<div class="forecasttemp">
<span class="frc-temp"></span>
<a class="frc-degree" href="#">℃</a>
</div>
</div>
<div class="forecastday">
<div class="forecasticons" >
<img class="fcicon" alt="weather-icon" src="">
</div>
<div class="forecastText"></div>
<div class="forecasttemp">
<span class="frc-temp"></span>
<a class="frc-degree" href="#">℃</a>
</div>
</div>
<div class="forecastday">
<div class="forecasticons" >
<img class="fcicon" alt="weather-icon" src="">
</div>
<div class="forecastText"></div>
<div class="forecasttemp">
<span class="frc-temp"></span>
<a class="frc-degree" href="#">℃</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</body>
</html>


Very small changes to make it work: in your click handler, rather than finding by class the field to fill, I use the clicked element to find its parent and then find the class WITHIN that parent. So it becomes $(this).parent().find(...) All these changes are between lines 53 and 59.
var api_key = "dd39280551e44f1bb34221739171701&q=";
var loc;
$(document).ready(function() {
// var latitude,longitude;
$.getJSON('http://ipinfo.io', function(d) {
loc = d.loc.split(",");
var apiLink = "http://api.apixu.com/v1/forecast.json?key=";
var days5 = "&days=5";
var api = apiLink + api_key + loc[0] + ',' + loc[1] + days5;
$.getJSON(api, function(v1) {
var tempSwapForecast = true;
var forecastdayData = v1.forecast.forecastday;
var days = forecastdayData.map(function(d) {
return d.day;
});
var maxtempc = days.map(function(maxc) {
return maxc.maxtemp_c;
});
var mintempc = days.map(function(minc) {
return minc.mintemp_c;
});
var maxtempf = days.map(function(maxf) {
return maxf.maxtemp_f;
});
var mintempf = days.map(function(minf) {
return minf.mintemp_f;
});
$('.forecasticons img').each(function(i) {
$(this).attr('src', days[i].condition.icon);
});
$('.frc-temp').each(function(i) {
// Added a 'units' property, so the temperature
// can track what type of unit it is displaying.
$(this).data("units", "c");
$(this).html(Math.round(maxtempc[i]) + "-" + Math.round(mintempc[i]));
});
$('.frc-degree').on("click", function() {
// As we use the .frc-temp el often, reference it once.
var myTempEl = $(this).parent().find(".frc-temp");
// This is the unique index of the clicked day.
var myIndex = $(".forecastday").index(
$(this).parents(".forecastday")
);
/****
* Above, we created a data attribute on the
* .frc-temp element to store the units. By
* doing this, the element becomes self-
* contained. Here, we can toggle the units
* based on that data attribute.
****/
if (myTempEl.data("units") === "f") {
// First, switch the unit attribute...
myTempEl.data("units", "c");
// Then, replace the contents of the temp el
myTempEl.html(
Math.round(maxtempc[myIndex]) +
"-" +
Math.round(mintempc[myIndex]));
// Then, set the contents of this to 'c'
$(this).html(" ℃");
tempSwapForecast = true;
} else {
myTempEl.data("units", "f");
myTempEl.html(
Math.round(maxtempf[myIndex]) +
"-" +
Math.round(mintempf[myIndex]));
$(this).html("℉");
tempSwapForecast = false;
}
});
$('.forecastText').each(function(i) {
$(this).html(days[i].condition.text);
});
});
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="other-days">
<div class="forecastday">
<div class="forecasticons">
<img class="fcicon" alt="weather-icon" src="">
</div>
<div class="forecastText"></div>
<div class="forecasttemp">
<span class="frc-temp"></span>
<a class="frc-degree" href="#">℃</a>
</div>
</div>
<div class="forecastday">
<div class="forecasticons">
<img class="fcicon" alt="weather-icon" src="">
</div>
<div class="forecastText"></div>
<div class="forecasttemp">
<span class="frc-temp"></span>
<a class="frc-degree" href="#">℃</a>
</div>
</div>
<div class="forecastday">
<div class="forecasticons">
<img class="fcicon" alt="weather-icon" src="">
</div>
<div class="forecastText"></div>
<div class="forecasttemp">
<span class="frc-temp"></span>
<a class="frc-degree" href="#">℃</a>
</div>
</div>
<div class="forecastday">
<div class="forecasticons">
<img class="fcicon" alt="weather-icon" src="">
</div>
<div class="forecastText"></div>
<div class="forecasttemp">
<span class="frc-temp"></span>
<a class="frc-degree" href="#">℃</a>
</div>
</div>
<div class="forecastday">
<div class="forecasticons">
<img class="fcicon" alt="weather-icon" src="">
</div>
<div class="forecastText"></div>
<div class="forecasttemp">
<span class="frc-temp"></span>
<a class="frc-degree" href="#">℃</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</body>
</html>
So many many small changes here: the frc-temp elements now have a data attribute that tracks whether the units are farenheit or centigrade, and the way I reference the elements has also changed slightly.

Related

Add anchor tags dynamically to a div when page load in Javascript

I have 2 divs that all have the same css class, as follows:
/*div 1 */
<div class="oxilab-flip-box-col-5 oxilab-flip-box-padding-1" >
<div class="oxilab-flip-box-body-1 oxilab-flip-box-body-1-1">
<div class="oxilab-flip-box-body-absulote">
<div class="oxilab-flip-box-flip oxilab-flip-box-flip-left-to-right">
<div class="oxilab-flip-box-style-data easing_easeInOutCirc">
<div class="oxilab-flip-box-style">
<div class="oxilab-flip-box-front">
<div class="oxilab-flip-box-1">
<div class="oxilab-flip-box-1-data">
</div>
</div>
</div>
<div class="oxilab-flip-box-back">
<div class="oxilab-flip-box-back-1">
<div class="oxilab-flip-box-back-1-data">
<div class="oxilab-heading" googl="true">
heading
</div>
<div class="oxilab-info">
some text
</div>
<a href="http://test.com" target="">
<span class="oxilab-button">
<span class="oxilab-button-data">
enter
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
/*div 2 */
<div class="oxilab-flip-box-col-5 oxilab-flip-box-padding-1" >
<div class="oxilab-flip-box-body-1 oxilab-flip-box-body-1-1">
<div class="oxilab-flip-box-body-absulote">
<div class="oxilab-flip-box-flip oxilab-flip-box-flip-left-to-right">
<div class="oxilab-flip-box-style-data easing_easeInOutCirc">
<div class="oxilab-flip-box-style">
<div class="oxilab-flip-box-front">
<div class="oxilab-flip-box-1">
<div class="oxilab-flip-box-1-data">
</div>
</div>
</div>
<div class="oxilab-flip-box-back">
<div class="oxilab-flip-box-back-1">
<div class="oxilab-flip-box-back-1-data">
<div class="oxilab-heading" googl="true">
heading
</div>
<div class="oxilab-info">
some text
</div>
<a href="http://example.com" target="">
<span class="oxilab-button">
<span class="oxilab-button-data">
enter
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
As you can see, both main divs have oxilab-flip-box-col-5 class and each has an ahref tag, now I want all the div components to be linked when the page is loaded, as follows:
/*div 1 */
<a href="http://test.com" target="">
<div class="oxilab-flip-box-col-5 oxilab-flip-box-padding-1" >
.
.
.
</div>
</a>
/*div 2 */
<a href="http://example.com" target="">
<div class="oxilab-flip-box-col-5 oxilab-flip-box-padding-1" >
.
.
.
</div>
</a>
I was able to write this code with JavaScript, but unfortunately, the code I wrote does not work.
var fisrtdiv = document.getElementsByClassName("oxilab-flip-box-col-5");
var aTag = document.createElement('a');
aTag.setAttribute('href',"http://test.com");
aTag.innerText = "some text";
fisrtdiv.appendChild(aTag);
var seconddiv = document.getElementsByClassName("oxilab-flip-box-col-5");
var aTag = document.createElement('a');
aTag.setAttribute('href',"http://example.com");
aTag.innerText = "some text";
seconddiv.appendChild(aTag);
Any idea how I can do this and link each div separately ?

Here You Go:
var first_div = document.getElementsByClassName("oxilab-flip-box-col-5")[0];
var parent1 = first_div.parentNode;
var a_tag1 = document.createElement('a');
parent1.replaceChild(a_tag1, first_div)
a_tag1.appendChild(first_div)
a_tag1.setAttribute('href',"http://example.com");
/////////
var second_div = document.getElementsByClassName("oxilab-flip-box-col-5")[1];
var parent2 = second_div.parentNode;
var a_tag2 = document.createElement('a');
parent2.replaceChild(a_tag2, second_div)
a_tag2.appendChild(second_div)
a_tag2.setAttribute('href',"http://example.com");

getElementsByClassName return an HTMLCollection of elements.
Change your code to:
var fisrtdiv = document.getElementsByClassName("oxilab-flip-box-col-5")[0];
var aTag = document.createElement('a');
aTag.setAttribute('href',"http://test.com");
aTag.innerText = "some text";
fisrtdiv.appendChild(aTag);
var seconddiv = document.getElementsByClassName("oxilab-flip-box-col-5")[1];
var aTag = document.createElement('a');
aTag.setAttribute('href',"http://example.com");
aTag.innerText = "some text";
seconddiv.appendChild(aTag);

You should try to DRY (Don't Repeat Yourself). You can see that you do 2 times the same thing. What if you need to do it 100 times? Then your code will get messy quickly.
You'll see 2 solutions in my code: the ugly way (not DRY) and the cleaner way (DRY). There's a even cleaner way but let's start with this ;)
/*THE UGLY WAY*/
/*
var fisrtdiv = document.getElementsByClassName("oxilab-flip-box-col-5")[0];
var first_link = document.createElement('a');
first_link.setAttribute('href',"http://test.com");
first_link.innerText = "some text1";
first_link.append(fisrtdiv);
document.body.append(first_link);
//we take again at index 0 because before this line we changed the position of the flip boxes
var seconddiv = document.getElementsByClassName("oxilab-flip-box-col-5")[0];
var second_link = document.createElement('a');
second_link.setAttribute('href',"http://example.com");
second_link.innerText = "some text2";
second_link.append(seconddiv);
document.body.append(second_link);
*/
/*CLEANER WAY*/
var
list_of_flip_boxes = document.querySelectorAll(".oxilab-flip-box-col-5"),
list_of_links = [
{
text : "some text 1",
href : "http://test.com"
},
{
text : "some text 2",
href : "http://example.com"
},
];
list_of_flip_boxes.forEach(function(flip_box, index){
var
link_element = document.createElement("a"),
link_data = list_of_links[index];
link_element.setAttribute('href', link_data.href);
link_element.innerText = link_data.text;
link_element.append(flip_box);
document.body.append(link_element);
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<div class="oxilab-flip-box-col-5 oxilab-flip-box-padding-1" >
<div class="oxilab-flip-box-body-1 oxilab-flip-box-body-1-1">
<div class="oxilab-flip-box-body-absulote">
<div class="oxilab-flip-box-flip oxilab-flip-box-flip-left-to-right">
<div class="oxilab-flip-box-style-data easing_easeInOutCirc">
<div class="oxilab-flip-box-style">
<div class="oxilab-flip-box-front">
<div class="oxilab-flip-box-1">
<div class="oxilab-flip-box-1-data">
</div>
</div>
</div>
<div class="oxilab-flip-box-back">
<div class="oxilab-flip-box-back-1">
<div class="oxilab-flip-box-back-1-data">
<div class="oxilab-heading" googl="true">
heading
</div>
<div class="oxilab-info">
some text
</div>
<a href="http://test.com" target="">
<span class="oxilab-button">
<span class="oxilab-button-data">
enter
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="oxilab-flip-box-col-5 oxilab-flip-box-padding-1" >
<div class="oxilab-flip-box-body-1 oxilab-flip-box-body-1-1">
<div class="oxilab-flip-box-body-absulote">
<div class="oxilab-flip-box-flip oxilab-flip-box-flip-left-to-right">
<div class="oxilab-flip-box-style-data easing_easeInOutCirc">
<div class="oxilab-flip-box-style">
<div class="oxilab-flip-box-front">
<div class="oxilab-flip-box-1">
<div class="oxilab-flip-box-1-data">
</div>
</div>
</div>
<div class="oxilab-flip-box-back">
<div class="oxilab-flip-box-back-1">
<div class="oxilab-flip-box-back-1-data">
<div class="oxilab-heading" googl="true">
heading
</div>
<div class="oxilab-info">
some text
</div>
<a href="http://example.com" target="">
<span class="oxilab-button">
<span class="oxilab-button-data">
enter
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Show/hide error div function detect I tag as a div

I'm trying to create a function to show and hide <div> when I click the <i> tag, but the <i> tag itself is detected as a div so it will leave a blank space and it looks bad, anyone know how to fix this?
function updateItems(tgt, delta) {
var $items = $(tgt).closest("div").children();
var $current = $items.filter('.current');
$current = $current.length ? $current : $items.first();
var index = $current.index() + delta;
// Range check the new index
index = (index < 0) ? 0 : ((index > $items.length) ? $items.length : index);
$current.removeClass('current');
$current = $items.eq(index).addClass('current');
// Hide/show the next/prev
$(".prev").toggle(!$current.is($items.first()));
$(".next").toggle(!$current.is($items.last()));
}
$(".next").click(function(e) {
updateItems(e.target, 1);
});
$(".prev").click(function(e) {
updateItems(e.target, -1);
});
// Cause initial selection
$(".group").each(function() {
updateItems(this, 0)
});
.current{
background-color:#aaa;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/fontawesome.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/solid.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js"></script>
<div class="container-fluid padding adungcontent">
<div class="row padding">
<div class="col-lg-4 text-center reveal">
<img src="img/agunglogo.png" alt="Agung logo" class="img-fluid" alt="Responsive image">
</div>
<div class="col-lg-8 text-justify reveal group">
<div>
<p>Test
</p>
</div>
<div>
<h2>Vision</h2>
<h2>Mission</h2>
</div>
<div>
<h2>Achievements</h2>
</div>
<div>
<h2 class="text-center">Values</h2>
</div>
<section>
<i class="fas fa-angle-right next"></i>
<i class="fas fa-angle-left prev"></i>
</section>
</div>
</div>
</div>

The problem is not that the <i> element is detected as a div, but that you are selecting the parent <div> with closest() and then selecting all it's children with children(), which includes the <i>.
function updateItems(tgt, delta) {
var $items = $(tgt).closest("div").find("div");
var $current = $items.filter('.current');
$current = $current.length ? $current : $items.first();
var index = $current.index() + delta;
// Range check the new index
index = (index < 0) ? 0 : ((index > $items.length) ? $items.length : index);
$current.removeClass('current');
$current = $items.eq(index).addClass('current');
// Hide/show the next/prev
$(".prev").toggle(!$current.is($items.first()));
$(".next").toggle(!$current.is($items.last()));
}
$(".next").click(function(e) {
updateItems(e.target, 1);
});
$(".prev").click(function(e) {
updateItems(e.target, -1);
});
// Cause initial selection
$(".group").each(function() {
updateItems(this, 0)
});
.current{
background-color:#aaa;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/fontawesome.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/solid.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js"></script>
<div class="container-fluid padding adungcontent">
<div class="row padding">
<div class="col-lg-4 text-center reveal">
<img src="img/agunglogo.png" alt="Agung logo" class="img-fluid" alt="Responsive image">
</div>
<div class="col-lg-8 text-justify reveal group">
<div>
<p>Test
</p>
</div>
<div>
<h2>Vision</h2>
<h2>Mission</h2>
</div>
<div>
<h2>Achievements</h2>
</div>
<div>
<h2 class="text-center">Values</h2>
</div>
<section>
<i class="fas fa-angle-right next"></i>
<i class="fas fa-angle-left prev"></i>
</section>
</div>
</div>
</div>

How to get this code to move one class at a time

So I have three DIVs with the same carousel effect. I am pretty sure I can use three different JavaScript codes to move one at a time but would like to make it as minimal code as possible. With the current code, when I click on the arrow once, all three of them moves. How can I get them to move separately?
There's three of the same one as the one below:
(function ($) {
$.fn.thumbGallery = function (settings) {
var $this = $(this);
return this.each(function () {
settings = jQuery.extend({
speed: 1000,
leftArrow: $this.find('.arrow-left'),
rightArrow: $this.find('.arrow-right'),
galleryContainer: $this.find('.gallery-inner'),
visibleImagesSize: 4
}, settings);
var imgElements = settings.galleryContainer.find('img').length;
var size = settings.visibleImagesSize;
//settings.leftArrow.hide();
if (imgElements > settings.visibleImagesSize) {
settings.rightArrow.show();
} else {
//settings.rightArrow.hide();
}
function animateLeft() {
var el = settings.galleryContainer.children(":last");
settings.galleryContainer.animate({
left: '+=' + el.outerWidth(true) + 'px'
},
settings.speed);
}
function animateRight() {
var el = settings.galleryContainer.children(":first");
settings.galleryContainer.animate({
left: '-=' + el.outerWidth(true) + 'px'
},
settings.speed);
}
function checkArrows() {
if (size === settings.visibleImagesSize) {
//settings.leftArrow.hide();
} else {
settings.leftArrow.show();
}
if (size === imgElements) {
//settings.rightArrow.hide();
} else {
settings.rightArrow.show();
}
}
settings.leftArrow.click(function () {
animateLeft();
size--;
checkArrows();
});
settings.rightArrow.click(function () {
animateRight();
size++;
checkArrows();
});
});
};
})(jQuery);
$(document).ready(function () {
$('.gallery').thumbGallery();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open-space">
<h2>Open Space</h2>
<p class="description">Desk space in an open shared office environment that can be used in various of ways.</p>
<center>
<div class="gallery">
<div class="arrow-left">
<div class="arrow-left-small">
</div>
</div>
<div class="gallery-outer">
<div class="gallery-inner">
<div class="gallery-tmb">
<img src="images/openspace1.png" alt="Open Space1" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace2.png" alt="Open Space2" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace3.png" alt="Open Space3" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace4.png" alt="Open Space4" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace5.png" alt="Open Space5" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace6.png" alt="Open Space6" height="auto" width="250"/>
</div>
</div>
</div>
<div class="arrow-right">
<div class="arrow-right-small">
</div>
</div>
</div>
<span class="btn_margin">
<asp:Button ID="Button3" runat="server" Text="More lists" CssClass="btn btn-primary top" OnClick="Btn_More_Click" />
</span>
</center>
</div>

The reason they move together is because you use the .gallery selector when you call thumbsGallery(), which applies to all elelements that have class="gallery" in the HTML code. What you can do is to simply add a unique id to each of the gallery and call thumbsGallery() with each of the selectors.
HTML:
<div class="gallery" id="executive_gallery">
...
</div>
<div class="gallery" id="conference_gallery">
...
</div>
<div class="gallery" id="open_gallery">
...
</div>
Javascript:
$(document).ready(function () {
$('.gallery#executive_gallery').thumbGallery();
$('.gallery#conference_gallery').thumbGallery();
$('.gallery#open_gallery').thumbGallery();
});
JSFiddle: https://jsfiddle.net/3qeLumkp/1/

jQuery attr("src") returning undefined

I'm trying to grab the source of an image using jQuery. However, when I log the result, it returns undefined. Here is my code:
$(document).ready(function() {
$(".btn-expand").on("click", function() {
var img = $(".img-" + "num" + " img").attr("src");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="assets/img/placeholder-banner.png" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
View
</div>
</div>
</div>
</div>

$(".img-" + "num" + " img")
is exactly equivalent to
$(".img-num img")
I believe you meant "num" to be a variable called num whose value is the number of the target image, not a hard-coded string:
$(document).ready(function() {
$(".btn-expand").on("click", function(event) {
var num = $(event.currentTarget).attr('overlay-data')
var img = $(".img-" + num + " img").attr("src");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="assets/img/placeholder-banner.png" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
View
</div>
</div>
</div>
</div>

Well you have an attribute on the anchor you do not read. Change it to be a data attribute and use a variable instead of hardcoding a string.
$(document).ready(function() {
$(".btn-expand").on("click", function (e) {
e.preventDefault()
var overlay = $(this).data("overlay")
var img = $(".img-" + overlay + " img").attr("src");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="http://via.placeholder.com/350x150" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
View
</div>
</div>
</div>
</div>

Everything looks good except that the attribute value wasn't defined. To set an attribute in jQuery, you must set the value. Hence, to correct that snippet.
$(document).ready(function() {
$(".btn-expand").on("click", function(event) {
var num = $(event.currentTarget).attr('overlay-data')
var img = $(".img-" + num + " img").attr("src");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="assets/img/placeholder-banner.png" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
View
</div>
</div>
</div>
</div>
$(document).ready(function() {
$(".btn-expand").on("click", function(event) {
var num = $(event.currentTarget).attr('overlay-data')
var img = $(".img-" + num + " img").attr("src","imageSource.extention");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="assets/img/placeholder-banner.png" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
View
</div>
</div>
</div>
</div>

var img = $(".img-" + "num" + " img").attr("src");
in this code you are looking for tag with class "im-num" and child with class "img". if you give class im-num to outer div and class img like below
<div class="col-md-12 img-banner img-2 im-num">
<img src="assets/img/placeholder-banner.png" alt="Banner 2" class='img'/>
</div>

how to index each element in jquery

I need to index each element like this 1/8, 2/8, 3/8
$(document).ready(function () {
var Thumbnail = $('.thm-img'); // main image wrapper
function ThumbnailCounter() {
var AllNumber = $(Thumbnail).length;
$(Thumbnail).each(function () {
var CurrentActive = $(Thumbnail).index() + 1; //return current number active thumbnail
$(this).children('span').append(CurrentActive + '/' + AllNumber);
});
}
new ThumbnailCounter();
});
.thm-img {
border: 1px solid red;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="thumb-wrp scrollbar-inner">
<div class="thm-img">
<img src="../img/img/a.jpg"><span class="numeric active"></span>
</div>
<div class="thm-img">
<img src="../img/img/b.jpg"><span class="numeric"></span>
</div>
<div class="thm-img">
<img src="../img/img/c.jpg"><span class="numeric"></span>
</div>
<div class="thm-img">
<img src="../img/img/d.jpg"><span class="numeric"></span>
</div>
<div class="thm-img">
<img src="../img/img/a.jpg"><span class="numeric"></span>
</div>
<div class="thm-img">
<img src="../img/img/c.jpg"><span class="numeric"></span>
</div>
<div class="thm-img">
<img src="../img/img/b.jpg"><span class="numeric"></span>
</div>
<div class="thm-img">
<img src="../img/img/d.jpg"><span class="numeric"></span>
</div>
</div>

Just change your script:
function ThumbnailCounter() {
var AllNumber = $(Thumbnail).length;
$('.thm-img').each(function () {
var CurrentActive = $(this).index() + 1; // Use $(this) to reference to current element - it will give you right index
$(this).children('span').append(CurrentActive + '/' + AllNumber);
});
}
new ThumbnailCounter();

You can use,
$(".thumb-wrp .thm-img").each(function() {
var index = $(".thumb-wrp .thm-img").index(this) + 1;
var total = $(".thumb-wrp .thm-img").length;
$(this).find("span").text(index + "/" + total);
})
Fiddle

Try
var CurrentActive = $(this).index() + 1;

Categories

Resources