I'm trying to create a button for muting and un-mute.
Initially I have by button set up like this:
<i class="fa fa-microphone" id="audio"></i>
and what I want is that when you click it, the class becomes:
<i class="fa fa-microphone-slash" id="audio"></i>
now I have my javascript set up like this:
$(document).ready(function() {
$('#audio').click(function() {
publisher.publishAudio(false);
});
});
which essentially mutes it, now I need to make it so that it can also unmute when I click on the button
you can check if the publisher is sending video/audio on the stream it self like this:
publisher.stream.hasAudio
publisher.stream.hasVideo
then you can use the ! (bang) to invert it
publisher.publishAudio(!publisher.stream.hasAudio);
publisher.publishVideo(!publisher.stream.hasVideo);
so to toggle the class aswell you do someting like
$(document).ready(function() {
var toggleAudioBtn = $('#audio')
toggleAudioBtn.click(function() {
toggleAudioBtn.toggleClass("fa-microphone-slash").toggleClass("fa-microphone");
publisher.publishAudio(!publisher.stream.hasAudio);
});
});
I don't know jquery that well but here's some simple javascript code to manipulate the class
$(document).ready(function() {
$('#audio').click(function() {
var audio = document.querySelector("#audio");
// get current class state
var currentState = audio.getAttribute("class");
// change class
if(currentState === "fa fa-microphone"){
audio.setAttribute("class", "fa fa-microphone-slash");
}else{
audio.setAttribute("class", "fa fa-microphone");
}
});
});
Using jQuery, I'd chain toggleClass, along with an if statement using hasClass for the logic:
$(document).ready(function() {
$('#audio').click(function() {
if ($(this).hasClass("fa-microphone-slash")) {
publisher.publishAudio(true);
} else {
publisher.publishAudio(false);
}
$(this).toggleClass("fa-microphone-slash");
$(this).toggleClass("fa-microphone");
publisher.publishAudio($(this).hasClass(""));
});
});
If you want a DRY solution with no if statement, based on the class:
$(document).ready(function() {
$('#audio').click(function() {
publisher.publishAudio($(this).hasClass("fa-microphone-slash"));
$(this).toggleClass("fa-microphone-slash");
$(this).toggleClass("fa-microphone");
});
});
The second solution will just use the presence of the fa-microphone tag as a boolean for whether to perform a mute.
Related
Hi im new on js and honestly speaking we're just starting learning js on our school. What i want to do is once i already click it it will be reset and remove the class again. "myClass has a display none"
$(function() {
$("body").click(function() {
$(".parela").addClass('myClass');
});
});
You can use toggleclass
$(function() {
$("body").click(function() {
$(".parela").toggleClass('myClass');
});
});
Use toggleClass, so at every click it will be added/removed automatically
$(function() {
$("body").click(function() {
$(".parela").toggleClass('myClass');
});
});
You want to use toggleClass() which will toggle the class on and off depending on the click. note that for the demo below - I created the button that toggles the class on the button click.
Another way of doing it - since the only effect is to hide the element - is just .toggle() which toggles the display state without the use of the added class. The following snippet shows both methods.
$(function() {
$("#toggleButton").click(function() {
$(".parela").toggleClass('myClass');
});
$("#toggleButton2").click(function() {
$(".parela2").toggle();
});
});
.myClass{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Using .toggleClass('myClass')</p>
<button type="button" id="toggleButton">clickMe</button>
<span class="parela"> Visible</span>
<hr/>
<p>Using just .toggle()</p>
<button type="button" id="toggleButton2">clickMe</button>
<span class="parela2"> Visible</span>
You can you use some sort of 'flag' variable to control the state.
You can name it whatever you want and make if statement to make decisions accordingly.
$(function() {
var flag = false;
$("body").click(function() {
if(!flag) {
$(".parela").addClass('myClass');
flag = true;
} else {
$(".parela").removeClass('myClass');
flag = false;
}
});
});
I have several images with the same class and would like to set up a click function that changes the text in some elements based on which image is clicked.
My if statement is not working, I'm not entirely sure why because I've used this method before, or so I thought.
$('.gallery_image').click(function(e) {
var t = $(this);
if(t.id == 'csf') {
console.log('It works!');
}
});
JSFIDDLE
Use t.attr('id') instead of t.id
More about .attr()
An alternate solution is using classes instead of id's. Call the click function on the class they share then use a second class to distinguish them with the hasClass function:
<div id="csf" class="gallery_image csf">csf</div>
<div id="csi" class="gallery_image csi">csi</div>
$('.gallery_image').click(function(e) {
var t = $(this);
if(t.hasClass('csf')) {
alert("It works!");
}
else if(t.hasClass('csi')) {
alert("So does this!");
}
});
I have this piece of code here:
$('.plus-area-current').click(function () {
$(".current-communities").slideToggle(function () {
$(".plus-area-current i").removeClass("fa-plus");
$(".plus-area-current i").addClass("fa-minus");
}, function () {
$(".plus-area-current i").removeClass("fa-minus");
$(".plus-area-current i").addClass("fa-plus");
});
});
When the user clicks plus-area-current, current-communities gets untoggled, what I am trying to is add / remove the fa-plus and fa-minus classes from an element pending if the element current-communities is toggled or not. This code above does not work, the element toggles but the class does not change, if I do this:
$('.plus-area-current').click(function () {
$(".current-communities").slideToggle();
$(".plus-area-current i").removeClass("fa-plus");
$(".plus-area-current i").addClass("fa-minus");
});
It works, but when I click to toggle it back up, its does not change back to the plus.
Use toggleClass() instead:
$('.plus-area-current').click(function () {
$(".current-communities").slideToggle();
$(".plus-area-current i").toggleClass("fa-plus fa-minus");
});
If you'd prefer the class change not to happen until the slideToggle() animation has completed, place that line within the callback, like this:
$('.plus-area-current').click(function () {
$(".current-communities").slideToggle(function() {
$(".plus-area-current i").toggleClass("fa-plus fa-minus");
});
});
I'm trying to make my links slide down over the page when the mobile nav is clicked and the content to disappear so only the links are shown. I have got this basically working but the .displayNone class will not remove when I click the mobilenav again and I'm a bit dumfounded as to why.
$(document).ready(function() {
$('#hamburger').on('click', function(){
$('.links').slideToggle(200);
var status = $('.wrapper').hasClass('.displayNone');
if(status){ $('.wrapper').removeClass('.displayNone'); }
else { $('.wrapper').addClass('displayNone'); }
});
});
Bit of newbie to all this. Anything obvious that anyone can see wrong with this?
Use toggleClass(),
$('.wrapper').toggleClass('displayNone');
And, jQuery's xxxClass() functions expect the name of the class, not the selector, so leave off the . class selector.
When adding/removing classes, just use displayNone, not .displayNone (note the dot!).
Also there's a toggleClass() function which saves you from doing the status thing, which means you just need to do
$('.wrapper').toggleClass('displayNone');
your are doing bit wrong
var status = $('.wrapper').hasClass('.displayNone');
when you use hasClass, addClass or removeClass then you don't need to have '.' dot before class name.
so correct way is
var status = $('.wrapper').hasClass('displayNone');
your code after correction
$(document).ready(function() {
$('#hamburger').on('click', function() {
$('.links').slideToggle(200);
var status = $('.wrapper').hasClass('displayNone');
if (status) {
$('.wrapper').removeClass('displayNone');
} else {
$('.wrapper').addClass('displayNone');
}
});
});
You can use :
$('.wrapper').toggleClass("displayNone");
Final code :
$(document).ready(function(){
$('#hamburger').on('click', function(){
$('.links').slideToggle(200);
$('.wrapper').toggleClass("displayNone");
})
})
I am new here, sorry if I do some mistake with this question.
I have a HTML code.
hit me
with this function i can add class two in class one
$(document).ready(function () {
$('a#foo').click(function(){
$('.one').toggleClass('two');
});
});
but how if I want to add class two if class two is not exist and do other function if class two is exist?
maybe like this,
hit me
i klik hit me and jquery is add class two,
hit me
but when I klick hit me again, class two is not removed and because class is exist, i create other function based on class two is exist.
lets say like this,
i klik hit me
hit me
<div id="blah" class=""*>lorem</div>
then
hit me
<div id="blah" class=""*>lorem</div>
and klik hit me again.
hit me
<div id="foo" class="blah2">lorem</div>
can you give me code or google suggest keyword or link, because I confused what i must search first.
thanks for adv,
sorry for my Grammer, i cant speak/write English well, if any wrong grammer or language please correct me.
Using the hasClass() method and you're examples:
$(document).ready(function () {
$('a#foo').click(function(){
if ($(this).hasClass('two')) {
$('#blah').addClass('blah2');
} else {
$(this).addClass('two');
}
});
});
Use jQuery hasClass method .
$(document).ready(function () {
$('a#foo').click(function(){
if ($(this).hasClass('two')) {
doSomething();
} else {
$('.one').addClass('two');
}
});
});
i'm a little confused as to what exactly you want to do, but I think you need to look into .hasClass() for starters.
$(document).ready(function () {
$('a#foo').click(function(){
if ($('.one').hasClass('two')) {
// do stuff you want to do if element already has class "two"
}
else {
// do stuff if it doesnt already have class "two"
}
});
});
I am guessing at your exact needs, but I hope that my assumptions weren't too far off base.
Given HTML like this:
hit me
<div id="change" class="blah1"></div>
And JS Like this:
$(document).ready(function () {
$('a#foo').click(function(e){
e.preventDefault();
var changeDiv = $('#change');
if ($(this).hasClass('two')) {
changeDiv.addClass('blah2').removeClass('blah1');
changeDiv.html('<p>Blah 2</p>');
} else {
changeDiv.addClass('blah1').removeClass('blah2');
changeDiv.html('<p>Blah 1</p>');
}
$('.one').toggleClass('two');
});
});
You will be able to toggle your link's class and change or update another div based on the class of your link when clicked.
You can see this code working at http://jsfiddle.net/PTdLQ/4/
Another way to look at this is to check if the given class exists in the dom. Therefore, one can use the following:
$(document).ready(function () {
$('a#foo').click(function(){
if ($('.two').length) {
//there is a class two
SomeFunction();
} else {
//there is no class two
SomeOtherFunction();
}
});
});
Hope I typed it right
Use this code:
<script>
$(document).ready(function () {
if(!$('#mydiv').hasClass('myclass')) {
$('#mydiv').addClass('myclass');
}
});
</script>