Develop Reference

jQuery not adding class to selected div id

I'm trying this code on website but it not working at all.
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
var link = jQuery(location).attr('pathname');
var fullurl = jQuery(location).attr('href');
if (link.split("/")[3] === "sardines") {
console.log("fullurl = " + fullurl);
console.log("pathname = " + link);
console.log("loop sardines");
jQuery('#sardines').addClass('capik');
console.log("end addClass");
}
else if (link.split("/")[3] === "saba"){
console.log("loop saba");
jQuery('#saba').addClass('capik');
console.log("end addClass");
}
else{
console.log("end of loop");
}
<div id="all-product-categories">
<div class="all-categories">
<h2>All Categories</h2>
</div>
<div class="col-12">
<div id="sardines" class="sardines col-3">
<a href="/index.php/products/sardines" alt="Sardines">
<div class="box">
<span>SARDINES</span>
<img src="images/AYAM-product-categories/sardines.png" alt="sardines" width="150" height="150" />
</div>
</a>
</div>
<div id="saba" class="saba col-3">
<a href="/index.php/products/saba" alt="Saba">
<div class="box">
<span>SABA</span>
<img src="images/AYAM-product-categories/saba.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="mackerel" class="col-3">
<a href="/index.php/products/mackerel" alt="Mackerel">
<div class="box">
<span>MACKEREL</span>
<img src="images/AYAM-product-categories/mackerel.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="tuna" class="col-3">
<a href="/index.php/products/tuna" alt="Tuna">
<div class="box">
<span>TUNA</span>
<img src="images/AYAM-product-categories/tuna.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
</div>
<div style="clear: both;"> </div>
<div class="col-12">
<div id="bakedbeans" class="col-3">
<a href="/index.php/products/baked-beans" alt="Baked Beans">
<div class="box">
<span>BAKED BEANS</span>
<img src="images/AYAM-product-categories/baked-beans.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="coconut" class="col-3">
<a href="/index.php/products/coconut" alt="Coconut">
<div class="box">
<span>COCONUT</span>
<img src="images/AYAM-product-categories/coconut.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="fruits" class="col-3">
<a href="/index.php/products/fruits" alt="Fruits">
<div class="box">
<span>FRUITS</span>
<img src="images/AYAM-product-categories/fruits.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="vegetables" class="col-3">
<a href="/index.php/products/vegetables" alt="Vegetables">
<div class="box">
<span>VEGETABLES</span>
<img src="images/AYAM-product-categories/vegetables.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
</div>
<div style="clear: both;"> </div>
Can someone help me with this issue. The script are running fine on the site but the jQuery not adding any class on the selected id. The loop also working fine. How to make the jQuery add the new class on the selected div id. Here i'm attaching the screenshot for the console that show the script are running fine and screenshot for the html. But the class are not added into the selected one.Look like it skipping the addClass script there.
This is when i'm on sardines page.

Wrap your code with jQuery(document).ready. Your code might have been executed before the html was fully loaded. Means that your selectors got executed when the element is not present yet..
// document.ready
jQuery(document).ready(function () {
var link = jQuery(location).attr('pathname');
console.log("url = " + link);
console.log(link.split("/")[3]);
console.log(link.split("/")[3] === "sardines");
if (link.split("/")[3] === "sardines") {
console.log("loop sardines");
jQuery('#sardines').addClass('class');
console.log("end addClass");
}
else if (link.split("/")[3] === "saba"){
console.log("loop saba");
jQuery('#saba').addClass('class');
console.log("end addClass");
}
else{
console.log("end of loop");
}
})
<!-- A not working example, inspect element you see there's no class -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("#test").addClass("test");
</script>
<div id="test">
Test
</div>
<!-- A working example, inspect element you see there's a class -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#test").addClass("test");
});
</script>
<div id="test">
Test
</div>
Hope that helps

JQuery hide/show content of multiple divs on click

I'm trying to show/hide multiple divs at the same time. I'm using anchor tag to achieve this. I want to change content of two separate divs at same time. One div holds iframe and other video description.
So far I've managed to make one of my divs change it's content, but not the other. Is there a way to make content of both divs change when I click on anchor tag ?
My code. HTML:
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 class='text-center'>Left Side</h2>
<ul>
<li><a class='myTag' href="#" rel="one">One</a></li>
<li><a class='myTag' href="#" rel="two">Two</a></li>
<li><a class='myTag' href="#" rel="three">Three</a></li>
</ul>
</div>
<div class="col-md-6">
<h2 class='text-center'>Right Side</h2>
<div id='zero'>
<img src="https://img.clipartfest.com/d28d6e716da993963c5b8b871f944141_the-golden-goose-01-golden-goose-clipart_295-230.jpeg" alt="" />
</div>
<div id='one' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/89_KXT5ztTU">
</iframe>
</div>
<div id='two' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/XlvZdsO5sIg">
</iframe>
</div>
<div id='three' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/uVoc4AzBX70">
</iframe>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h2>Lower container</h2>
<div id='zero'>
<p>This text needs to change. Video description</p>
</div>
<div id='one' style="display: none">
<p>This is my video description</p>
</div>
</div>
</div>
</div>
JS:
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("#"+target).show('slow').siblings("div").hide('slow');
});
Also a followup question can I make this toggleable (I've tried adding toggle() at the end of my line, but it just made everything worse), so when I click on anchor tag again it returns original image ?
Here is the codepen so you can better understand my problem : https://codepen.io/Karadjordje/pen/ybRyyo?editors=1010

The crux of your problem is that IDs must be unique. If you have multiple of the same ID then it will never work as expected. I switched things to classes and it's working as you expected.
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("."+target).show('slow').siblings("div").hide('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 class='text-center'>Left Side</h2>
<ul>
<li><a class='myTag' href="#" rel="one">One</a></li>
<li><a class='myTag' href="#" rel="two">Two</a></li>
<li><a class='myTag' href="#" rel="three">Three</a></li>
</ul>
</div>
<div class="col-md-6">
<h2 class='text-center'>Right Side</h2>
<div class='zero'>
<img src="https://img.clipartfest.com/d28d6e716da993963c5b8b871f944141_the-golden-goose-01-golden-goose-clipart_295-230.jpeg" alt="" />
</div>
<div class='one' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/89_KXT5ztTU">
</iframe>
</div>
<div class='two' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/XlvZdsO5sIg">
</iframe>
</div>
<div class='three' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/uVoc4AzBX70">
</iframe>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h2>Lower container</h2>
<div class='zero'>
<p>This text needs to change. Video description</p>
</div>
<div class='one' style="display: none">
<p>This is my video description</p>
</div>
<div class='two' style="display: none">
<p>Two!</p>
</div>
<div class='three' style="display: none">
<p>Three!</p>
</div>
</div>
</div>
</div>

Instead of having multiple divs for each description, use one div and change the content based on rel value. store the description inside an object and use rel value to get the description.
// store your description in here
// on click the anchor tag get the rel value and display description
// like desc[relvalue]
var desc = {'one': 'no man no cry jimmy sax', 'two': 'Pendulum - hold on', 'three': 'Paul Van Dyk'};
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("#"+target).show('slow').siblings("div").hide('slow');
$('#desc p').html(desc[$(this).attr('rel')])
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 class='text-center'>Left Side</h2>
<ul>
<li><a class='myTag' href="#" rel="one">One</a></li>
<li><a class='myTag' href="#" rel="two">Two</a></li>
<li><a class='myTag' href="#" rel="three">Three</a></li>
</ul>
</div>
<div class="col-md-6">
<h2 class='text-center'>Right Side</h2>
<div id='zero'>
<img src="https://img.clipartfest.com/d28d6e716da993963c5b8b871f944141_the-golden-goose-01-golden-goose-clipart_295-230.jpeg" alt="" />
</div>
<div id='one' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/89_KXT5ztTU">
</iframe>
</div>
<div id='two' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/XlvZdsO5sIg">
</iframe>
</div>
<div id='three' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/uVoc4AzBX70">
</iframe>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h2>Lower container</h2>
<div id='desc'>
<p>This text needs to change. Video description</p>
</div>
</div>
</div>
</div>

Change id to class...
Instead of id="one" put class="one", and in the jquery put:
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("."+target).show('slow').siblings("div").hide('slow');
});

How can I access the parent element properties using jQuery?

How can I access the parent element properties using jQuery? For example the below code is in my site:
<div style="text-align: center;">
<h3>Testing</h3>
<p>
<a style="display: inline-block;" href="http://www.google.com" target="_blank">
<img class="alignleft size-full wp-image-3748" src="/wp-content/uploads/BBB336699.png" alt="BBB" height="45">
</a>
<a style="display: inline-block;" href="http://www.facebook.com" target="_blank">
<img class="alignleft size-full wp-image-3749" src="/wp-content/uploads/COA336699.png" alt="COA" height="45">
</a>
<a style="display: inline-block;" href="http://portal.hud.gov/hudportal/HUD" target="_blank">
<img class="alignleft size-full wp-image-3750" src="/wp-content/uploads/HUD336699.png" alt="HUD" height="45">
</a>
<a style="display: inline-block;" href="http://www.gmail.com/" target="_blank">
<img class="alignleft wp-image-3921" src="/wp-content/uploads/HPF336699.png" alt="HPF" height="45">
</a>
</p>
</div>
$("a").click(function(event){
var key = window.event.toElement;
var re = /speridian/gi;
if (key.href.search(re) == -1) {
alert("it is not");
}
});
When I click the Above Links i am getting an img element event properties but I need the a element event properties like toElement.
Could you anyone please help me out how to get the anchor elements events here. Thanks in advance!

The issue is because you're using the window.event. Use this to reference the clicked element instead:
$("a").click(function(e) {
e.preventDefault(); // stop the page being redirected
var re = /speridian/gi;
if ($(this).prop('href').search(re) == -1) {
alert("it is not");
}
});

Use .parent(SELECTOR), Get the parent(immediate parent) of each element in the current set of matched elements, optionally filtered by a selector.
$('img').on('click', function(e) {
//e.stopPropagation();
console.log($(this).parent('a').prop('href'));
});
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div style="text-align: center;">
<h3>Testing</h3>
<p>
<a style="display: inline-block;" href="http://www.google.com" target="_blank">
<img class="alignleft size-full wp-image-3748" src="/wp-content/uploads/BBB336699.png" alt="BBB" height="45">
</a>
<a style="display: inline-block;" href="http://www.facebook.com" target="_blank">
<img class="alignleft size-full wp-image-3749" src="/wp-content/uploads/COA336699.png" alt="COA" height="45">
</a>
<a style="display: inline-block;" href="http://portal.hud.gov/hudportal/HUD" target="_blank">
<img class="alignleft size-full wp-image-3750" src="/wp-content/uploads/HUD336699.png" alt="HUD" height="45">
</a>
<a style="display: inline-block;" href="http://www.gmail.com/" target="_blank">
<img class="alignleft wp-image-3921" src="/wp-content/uploads/HPF336699.png" alt="HPF" height="45">
</a>
</p>
</div>

Replace a video with another in an IFrame using JQuery or Javascript

I have the following html and jquery - I am trying to replace the initial video loaded with the video in the hidden span tag. The src of the IFrame is replaced but the video disappears and nothing is displayed. I believe it might have something to do with the way the file is hosted and rendered by the hosting company. I have tried the JQuery reload and the clone but no joy. Perhaps someone has come across a similar problem
<script src="https://code.jquery.com/jquery-1.4.2.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$(".hoveritem").click(function () {
var itemtext = '#' + $(this).attr('rel');
var videolink = itemtext + 'vid';
$("#contentvid").attr('src', $(videolink).html());
//$("#contentvid").replaceWith($("#contentvid")).clone();
});
});
</script>
<style>
.hoveritem{cursor:pointer}
</style>
<div>
<div>
<div id="contenttext">
<div style="float:left;;">
<h3>Hello</h3>
<p>Click the buttom to replace the video</p>
</div>
</div>
<div class="VideoArea" style="border:solid 1px black">
<iframe id="contentvid" width="230" height="120" src="0" frameborder="0" style="overflow:hidden" scrolling="no" allowfullscreen></iframe>
</div>
<div style="clear:both"></div>
</div>
<div> </div>
<div id="GivingGrove" class="hoveritem" rel="givinggrovetext">
<div id="givinggrovetext">
<div >
<div class="TextArea">
<button value="">Change Video</button>
</div>
<span id="givinggrovetextvid" style="display:none">h&w=230</span>
</div>
</div>
</div>

Here you are :)
$(document).ready(function() {
$(".hoveritem").click(function() {
var change = $(this).find('.change').data('video');
$("#contentvid").attr('src', change);
});
});
.hoveritem {
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<div>
<div id="contenttext">
<div style="float:left;;">
<h3>Hello</h3>
<p>Click the buttom to replace the video</p>
</div>
</div>
<div class="VideoArea" style="border:solid 1px black">
<iframe id="contentvid" width="230" height="120" src="https://video.homegroup-media.co.uk/video/416Ql4rU1?h=120&w=230" frameborder="0" style="overflow:hidden" scrolling="no" allowfullscreen></iframe>
</div>
<div style="clear:both"></div>
</div>
<div> </div>
<div id="GivingGrove" class="hoveritem" rel="givinggrovetext">
<div id="givinggrovetext">
<div>
<div class="TextArea">
<button class="change" data-video="https://video.homegroup-media.co.uk/video/9RUyIKYxJ?h=120&w=230">Change Video</button>
</div>
<span id="givinggrovetextvid" style="display:none"></span>
</div>
</div>
</div>

how to run javascript function when click on image?

i have this html:
<ul class="cont_ul4">
<li class="cont_li">
<div class="cont_picture">
<img src="1.jpg" width="150" height="225" >
</div>
</li>
<li class="cont_li">
<div class="cont_picture">
<img src="2.jpg" width="150" height="225" >
</div>
</li>
</ul>
and this function:
function ajax_request() {
$('#placeholder').html('<p><img class="loader" src="/loader.gif"></p>');
$('#placeholder').load("/test.php?id=1234556");
}
what i need is when i click on the image to trigger this function.
with an input button i could do this:
<input type="button" onclick="ajax_request()" value="Click Me!" />
any ideas?
Thanks

Give your image an id:
<img id="myImage" src="1.jpg" width="150" height="225" style="cursor:pointer">
Then in Javascript:
$("#myImage").click(ajax_request);
Or if you want to run the same function for all images:
$("img").click(ajax_request);
However it would be better to give your images a CSS class and then use that. That way you can restrict the click action to specific images:
<img class="link-image" src="1.jpg" width="150" height="225">
...
<img class="link-image" src="2.jpg" width="150" height="225">
Then:
$(".link-image").click(ajax_request);

Are you lookin for something like this?:
$(function(){
$("img").click(function(){
ajax_request();
});
});

Try this:
JS:
function ajax_request() {
$('#placeholder').html('<p><img class="loader" src="/loader.gif"></p>');
$('#placeholder').load("/test.php?id=1234556");
}
$('#run_ajax').click(ajax_request);
HTML:
<input type="button" id='run_ajax' value="Click Me!" />