We Keep Coding

how to exchange the attribute values simultaneously on single click event using jQuery

I want to replace #cardvieo_localstream with #cardvideo_remotestream at the first click, again I click the same element, I want to change #cardvideo_remotestream back #cardvieo_localstream, I'm not sharp at jQuery yet, but I'm trying to learn. I appreciate all help I can get.
I've try this code but working on first click. but not working on second click
$('.video-list .videoWrap').on('click', function() {
var $thisVideoWrap = $(this).find('.video-list .videoWrap');
var $mainVideoWrap = $('.mainVideoWrap');
if ($(this).attr('id') === '#cardvideo_localStream') {
$(this).attr('id', '#cardvideo_remotestream');
}
else if($(this).attr('id') == '#cardvideo_localStream') {
$(this).attr('id', '#cardvideo_local');
$mainVideoWrap.attr('id', 'cardvideo_remotestream');
}
});

Don't change An Id Attribute because of id is a unique value Only use the Classname, I swap the elements successfully
// using jQuery
var initVideoSwapping = function () {
// check if there is an element first
if ($('.video-list .videoWrap').length > 0) {
$('.video-list .videoWrap').on('click', function () {
var $thisVideo = $(this).find('video')[0];
var $mainVideo = $('.mainVideoWrap').find('video')[0];
swapNodes($thisVideo, $mainVideo)
});
}
}
function swapNodes(a, b) {
var aparent = a.parentNode;
var asibling = a.nextSibling === b ? a : a.nextSibling;
b.parentNode.insertBefore(a, b);
aparent.insertBefore(b, asibling);
}
$(function () {
initVideoSwapping();
});

How can I achieve click event in JavaScript?

I select a span element on the page. For the first click, I want it to link to another page. On the second click, I want it to return to the original page.
For example, I have a link with example.com, which is the original. When this element "abcd" is clicked I want it to link to example.com/ar, and when it's clicked again I want it to go back to example.com.
document.querySelector('span.arb').addEventListener('click', function() {
a.href="example.com";
})
How do I complete this using the above?

you can get link and change her after click
document.querySelector('span.arb').addEventListener('click', toogle)
function toogle(){
if( document.querySelector('span.arb').href === "domain.com"){
document.querySelector('span.arb').href = "domain.com/link"
} else if (document.querySelector('span.arb').href === "domain.com/link"){
document.querySelector('span.arb').href = "domain.com"
}

Hold the link in a data attribute and use that to toggle.
document.querySelector("[data-toggleHref]").addEventListener("click", function(){
//Get the link element
var a = document.querySelector("a");
var current = a;
//Log to demontrate only
console.log(this.dataset.togglehref);
//Update the link
a.href = this.dataset.togglehref;
//Set the data attribute for toggle
this.dataset.togglehref = current;
});
Link
<span data-toggleHref="/pageb.html">Click Me</span>

try this code:
document.querySelector('span.arb').addEventListener('click', function() {
if(a.href == "example.com") {
a.href="example.com/ar";
} else {
a.href="example.com";
}
})
or a shorter answer using ternary operator:
document.querySelector('span.arb').addEventListener('click', function() {
a.href = a.href == "example.com" ? "example.com/ar" : "example.com";
})

Try this:
let count = 0;
document.querySelector('span.arb').addEventListener('click', function () {
count++;
document.querySelector('a').href = "http://example.com";
if (count == 1) {
document.querySelector('a').href = "http://example.com/ar";
} else {
document.querySelector('a').href = "http://example.com";
}
});
Link
<span class="arb">Click Me</span>

How do I add a second function to a button?

Say I have a standard HTML link like so:
<a href='https://whateverdomain.com/whatever.pdf' class='pdf-download'>
How can I both link to that .pdf and fire a jQuery function at the same time?
I've written this so far:
$('.pdf-download').addEventListener('click', function() {
$.getJSON('/documents/email', function(email) {
if (email.documentID && email.message == 'success') {
console.log('Sending email...');
};
},
false);
But that just prevents my button from being clickable. I should mention that that listener is part of a bigger function:
function checkForAnswers() {
var count = $('.pdf-checklist').filter(function() {
return $(this).val() !== "";
}).length;
var total = $('.pdf-checklist').length;
$('.pdf-download').addEventListener('click', function() {
$.getJSON('/documents/email_press_ad', function(email) {
if (email.documentID && email.message == 'success') {
console.log('Sending email...');
};
}, false);
if (count == total) {
$('.pdf-download').removeClass('disabled');
$('.pdf-download').removeAttr('disabled');
} else {
$('.pdf-download').addClass('disabled');
$('.pdf-download').attr('disabled', 'disabled');
}
console.log(count + '/' + total);
}
$('.pdf-checklist').on('keyup', checkForAnswers);

You could try just binding it with on
$(".pdf-download").on("click", function (e) {
e.preventDefault();
//do your stuff.
//navigate to a click href via window.location
window.location = $(this).attr('href');
});
So you cancel the click default event and manually force the url change after code is complete.
Editted according to comments.

Can't change opacity of image with jQuery

I'm trying to get a image to change opacity based on a boolean flag. It should drop opacity when the var pauseDisabled = true and go back to a value of 1 when pauseDisabled = false.
I created the fiddle below to simulate what I'm attempting. In this example I simply am trying to use a link to control the on/off switch. It won't drop opacity however and I'm not sure what I'm doing wrong.
JS Fiddle: https://jsfiddle.net/w51Lxvjp/8/
<div class="pause">
<a class="pause-btn">
<img class="pause-img" src="https://cdn3.iconfinder.com/data/icons/buttons/512/Icon_4-512.png">
</a>
</div>
<a class="disabler" href="#">Disable Button</a>
$(document).ready(function() {
var pauseDisabled = false;
$('.disabler').click(function() {
pauseDisabled = true;
})
if (pauseDisabled === true) {
$('.pause').css('opacity', '0.2');
} else if (pauseDisabled === false) {
$('.pause').css('opacity', '1');
}
});

Your logic is flawed as the if condition will only run once on load of the page. Instead you need to set the opacity each time the pauseDisabled flag is toggled within the click event handler. Try this:
jQuery($ => {
let pauseDisabled = false;
$('.disabler').click(() => {
pauseDisabled = !pauseDisabled;
$('.pause').css('opacity', pauseDisabled ? '0.2' : '1');
})
});
img { width: 250px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="pause">
<a class="pause-btn">
<img class="pause-img" src="https://cdn3.iconfinder.com/data/icons/buttons/512/Icon_4-512.png">
</a>
</div>
<a class="disabler" href="#">Disable Button</a>

Your jsFiddle has been updated:
https://jsfiddle.net/w51Lxvjp/15/
Essentially, your IF structure was executed only once, before any click on the link.
$('.disabler').click(function() {
pauseDisabled = !pauseDisabled;
if (pauseDisabled === true) {
$('.pause-img').css('opacity', '0.2');
} else {
$('.pause-img').css('opacity', '1');
}
})

No need to create this if else outside of this click event . You can change the opacity directly inside the click event .
$(document).ready(function() {
var pauseDisabled = false;
$('.disabler').click(function() {
if (pauseDisabled === false) {
$('.pause').css('opacity', '0.2');
pauseDisabled = true;
} else if (pauseDisabled === true) {
$('.pause').css('opacity', '1');
pauseDisabled = false;
}
})
});

jQuery show icon with toggle event

I have create custom toogle script to show/hide content.
Currently when you click first and then second text, icon mechanism working perfect. but when you click first text and again click first icon mechanism not working.
My JS Code:
$(document).ready(function() {
$('.togglelink').on('click', function(e) {
e.preventDefault();
var elem = $(this).next('.toggle');
$('.toggle').not(elem).hide('fast');
elem.slideToggle('fast');
if (elem.is(':visible')) {
var openslide = $(this).attr("id");
if (openslide == 'slideNavToggle') {
$("#where-slide-down").hide();
$("#where-slide-up").show();
$("#inspiration-slide-down").show();
$("#inspiration-slide-up").hide();
$("#need-slide-down").show();
$("#need-slide-up").hide();
}
if (openslide == 'slideInspToggle') {
$("#inspiration-slide-down").hide();
$("#inspiration-slide-up").show();
$("#where-slide-down").show();
$("#where-slide-up").hide();
$("#need-slide-down").show();
$("#need-slide-up").hide();
}
if (openslide == 'slideToggle') {
$("#need-slide-down").hide();
$("#need-slide-up").show();
$("#where-slide-down").show();
$("#where-slide-up").hide();
$("#inspiration-slide-down").show();
$("#inspiration-slide-up").hide();
}
}
});
$('.toggle').hide('fast');
});
My Fiddle: Sample
Any ideas or suggestions? Thanks.

Here you go:
You just have to change from show/hide to toggle. Fiddle
$('.togglelink').on('click', function (e) {
e.preventDefault();
var elem = $(this).next('.toggle');
$('.toggle').not(elem).hide('fast');
elem.slideToggle('fast');
if (elem.is(':visible')) {
var openslide = $(this).attr("id");
if (openslide == 'slideNavToggle') {
$("#where-slide-down").toggle();
$("#where-slide-up").toggle();
$("#inspiration-slide-down").show();
$("#inspiration-slide-up").hide();
$("#need-slide-down").show();
$("#need-slide-up").hide();
}
if (openslide == 'slideInspToggle') {
$("#inspiration-slide-down").toggle();
$("#inspiration-slide-up").toggle();
$("#where-slide-down").show();
$("#where-slide-up").hide();
$("#need-slide-down").show();
$("#need-slide-up").hide();
}
if (openslide == 'slideToggle') {
$("#need-slide-down").toggle();
$("#need-slide-up").toggle();
$("#where-slide-down").show();
$("#where-slide-up").hide();
$("#inspiration-slide-down").show();
$("#inspiration-slide-up").hide();
}
}
});
$('.toggle').hide('fast');