Toggle button state via jQuery - javascript

I have two buttons like (thumbs up) and unlike (thumbs down). Clicking on one button should toggle the state of both, only one being active.
Here is what I have attempted so far:
<button type="button" class="bout unlike bthumb boutontagthumbdown" id="unlike_'.$row['tag_number_id'].'" value="unlike">
<i class="fas fa-thumbs-down fa-lg"></i>
</button>'
<button type="button" class="bout like bthumb boutontagthumbup" id="like_'.$row['tag_number_id'].'" value="like">
<i class="fas fa-thumbs-up fa-lg"></i>
</button>
<script type="text/javascript">
$(function(){
console.log( "ready!" );
$(".bout").click(function(){
var Id = this.id;
var Idunlike = ("#" + Id + ".bout.unlike");
var Idlike = ("#" + Id + ".bout.like");
if ( $(this).attr("value") == 'unlike' ){
$(Idunlike).toggleClass("boutontagthumbdownclic");
$(Idlike).addClass("boutontagthumbupclicreturn");
console.log(Idunlike);
} else if ( $(this).attr("value") == 'like' ) {
$(Idlike).toggleClass("boutontagthumbupclic");
$(Idunlike).addClass("boutontagthumbdownclicreturn");
console.log(Idlike);
}
});
});
</script>

try this
$(function(){
$(".bout").click(function(){
var id = $(this).attr('id').split('_')[1];
switch($(this).attr('value')){
case 'like' :
$('#like_'+id).addClass('boutontagthumbupclic').removeClass('boutontagthumbupclicreturn');
$('#unlike_'+id).addClass('boutontagthumbdownclicreturn').removeClass('boutontagthumbdownclic');
break;
case 'unlike' :
$('#like_'+id).addClass('boutontagthumbupclicreturn').removeClass('boutontagthumbupclic');
$('#unlike_'+id).addClass('boutontagthumbdownclic').removeClass('boutontagthumbdownclicreturn');
break;
}
});
});
.boutontagthumbupclic{color:green;}
.boutontagthumbdownclic{color:red;}
.boutontagthumbdownclicreturn,
.boutontagthumbupclicreturn{color:#555;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button type="button" class="bout unlike bthumb boutontagthumbdown" id="unlike_1" value="unlike"><i class="fa fa-thumbs-down fa-lg"></i></button>
<button type="button" class="bout like bthumb boutontagthumbup" id="like_1" value="like"><i class="fa fa-thumbs-up fa-lg"></i></button>

The following should work:
$(function(){
$(".status button").click(function () {
$(".status").find(".active").removeClass("active");
$(this).addClass("active");
})
});
HTML:
<div class="status">
<button type="button" class="like" value="like">
<i class="fas fa-thumbs-up fa-lg"></i>
</button>'
<button type="button" class="unlike" value="like">
<i class="fas fa-thumbs-down fa-lg"></i>
</button>'
</div>
CSS:
.like i, .unlike i {
color: gray
}
.like.active i {
color: green;
}
.unlike.active i {
color: red;
}

Related

Why click event works after two clicks VANILLA

I am trying to trigger a function through a event listener with only one click.
But it occurs after two click (in the first time) if I don't do F5 its trigger after one click.
Code:
HTML
<div class="main-header-navbar">
....
<span class="main-header-navbar-right-icons">
<i class="fas fa-search header-icon"></i>
<i class="fas fa-plus header-icon"></i>
</span>
</div>
JS
const ADD_FORM_BUTTON = document.querySelector(".fa-plus");
ADD_FORM_BUTTON.addEventListener("click", function (event) {
event.preventDefault();
if (ADD_FORM.style.display === "none") {
ADD_FORM.style.display = "flex";
} else ADD_FORM.style.display = "none";
});
What am I missing?
You probably need to add style="display: none;" to your ADD_FORM so that it's initially hidden, then when you click on the fa-plus it will display it. See the snippet below:
const ADD_FORM_BUTTON = document.querySelector(".fa-plus");
const ADD_FORM = document.getElementById("form");
ADD_FORM_BUTTON.addEventListener("click", function(event) {
event.preventDefault();
if (ADD_FORM.style.display === "none") {
ADD_FORM.style.display = "flex";
} else {
ADD_FORM.style.display = "none"
};
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<div class="main-header-navbar">
<span class="main-header-navbar-right-icons">
<i class="fas fa-search header-icon"></i>
<i class="fas fa-plus header-icon"></i>
</span>
<div id="form" style="display: none;">ADD_FORM</div>
</div>

toggle button on click in jquery

First, let me clear you all one thing that i have already searched a lot but couldn't find the answer which will solve my problem. I have a button which when i click it's icon changes and some functions called than when i again click on that button it's icon must be revert and same functions called again.
I have this button:
<button type="button" class="btn" id="voice_icon" title="microphone">
<i style="font-size: 24px;" class="fa fa-microphone fa-2x voice_control" id="voice_control"></i>
<small class="toolbar-label mic-btn" id="mic">Mic.</small>
</button>
while clicking on that button these functions and classes should be called:
$('#voice_icon').click(function () {
voiceAtion.voice();
test.start();
$('#voice_control').addClass("fa-microphone-slash").removeClass("fa-microphone");
$('#mic').html("<i class='fa fa-spinner fa-pulse fa-1x fa-fw'></i>");
});
And when i again click on that icon these icons and classes should be called again :
test.abort();
$('#voice_control').addClass("fa-microphone").removeClass("fa-microphone-slash");
$('#mic').html("Mic.");
$('#voice_icon').click(function() {
voiceAtion.voice();
test.start();
$('#voice_control').addClass("fa-microphone-slash").removeClass("fa-microphone");
$('#mic').html("<i class='fa fa-spinner fa-pulse fa-1x fa-fw'></i>");
});
test.abort();
$('#voice_control').addClass("fa-microphone").removeClass("fa-microphone-slash");
$('#mic').html("Mic.");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn" id="voice_icon" title="microphone">
<i style="font-size: 24px;" class="fa fa-microphone fa-2x voice_control" id="voice_control"></i>
<small class="toolbar-label mic-btn" id="mic">Mic.</small>
</button>
Try something like this first time click goes to else and for second click it goes to if. so on..
$('#voice_icon').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
//first code
} else {
//second code
}
$(this).data("clicks", !clicks);
});
Instead of addClass/removeClass use toggleClass.
$('#voice_control').toggleClass("fa-microphone-slash fa-microphone");
use hasClass for check which class to remove and add
$(document).ready(function() {
$('#voice_icon').click(function() {
if ($('#voice_control').hasClass("fa-microphone")) {
$('#voice_control').addClass("fa-microphone-slash").removeClass("fa-microphone");
$('#mic').html("<i class='fa fa-spinner fa-pulse fa-1x fa-fw'></i>");
} else {
$('#voice_control').addClass("fa-microphone").removeClass("fa-microphone-slash");
$('#mic').html("Mic.");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn" id="voice_icon" title="microphone">
<i style="font-size: 24px;" class="fa fa-microphone fa-2x voice_control" id="voice_control"></i>
<small class="toolbar-label mic-btn" id="mic">Mic.</small>
</button>
// You can also use global variable and check for true false:
<button type="button" class="btn" id="voice_icon" title="microphone">
<i style="font-size: 24px;" class="fa fa-microphone fa-2x voice_control" id="voice_control"></i>
<small class="toolbar-label mic-btn" id="mic">Mic.</small>
</button>
<script>
var x = true;
$('#voice_icon').click(function () {
if(x){
$('#voice_control').removeClass("fa-microphone").addClass("fa-microphone-slash")
x = false;
}
else{
$('#voice_control').addClass("fa-microphone").removeClass("fa-microphone-slash")
x = true;
}
$('#mic').html("<i class='fa fa-spinner fa-pulse fa-1x fa-fw'></i>");
});
</script>

Change class "data-value" with plus / minus buttons?

so all tutorials show how to change a simple input "value" with plus and minus buttons.
This is my question, how do I change a class "data-value"?
$(document).on('click','.value-control',function(){
var action = $(this).attr('data-action')
var target = $(this).attr('data-target')
var dataValue = parseFloat($('[id="'+target+'"]').val());
if ( action == "plus" ) {
value++;
}
if ( action == "minus" ) {
value--;
}
$('[id="'+target+'"]').data("value", (value));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- I want to change the "data-value" value here (it's a meter gauge lots of JS -->
<div class="gauge" id="guagechanger" data-plugin="gauge" data-value="1" data-min-value="1" data-max-value="10" data-stroke-color="#f978a6">
<div class="gauge-label"></div>
<canvas width="200" height="150"></canvas>
</div>
<!-- my plus and minus buttons -->
<button type="button" class="btn btn-floating btn-danger value-control" data-action="minus" data-target="guagechanger"><i class="icon wb-minus" aria-hidden="true"></i></button>
<button type="button" class="btn btn-floating btn-danger value-control" data-action="plus" data-target="guagechanger"><i class="icon wb-plus" aria-hidden="true"></i></button>
You were really close,
just instead of going to target.val() you need to go to taget.data('value'),
and you got confused a little bit with the variable names.
here is a working snippet
$(document).on('click','.value-control',function(){
var action = $(this).attr('data-action');
var target = $(this).attr('data-target');
var value = parseFloat($('#'+target).data('value'));
if ( action == "plus" ) {
value++;
}
if ( action == "minus" ) {
value--;
}
console.log(value);
$('#'+target).data("value", (value));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<!-- I want to change the "data-value" value here (it's a meter gauge lots of JS -->
<div class="gauge" id="guagechanger" data-plugin="gauge" data-value="1" data-min-value="1" data-max-value="10" data-stroke-color="#f978a6">
<div class="gauge-label"></div>
<canvas width="200" height="150"></canvas>
</div>
<!-- my plus and minus buttons -->
<button type="button" class="btn btn-floating btn-danger value-control" data-action="minus" data-target="guagechanger"><i class="icon wb-minus" aria-hidden="true"></i></button>
<button type="button" class="btn btn-floating btn-danger value-control" data-action="plus" data-target="guagechanger"><i class="icon wb-plus" aria-hidden="true"></i></button>
According with jquery .data() :
var target = $(this).data('target');
For change data attributes :
$(this).data('target', value);

Change class on span tag onClick inside Button tag

<button class="btn btn-primary" onclick="wavesurfer.playPause()" type="button">
<span class="glyphicon glyphicon-play"></span></button>
When I press this button I want the span class to change:
From: class="glyphicon glyphicon-play"
To: class="glyphicon glyphicon-pause"
http://jsfiddle.net/fnfNm/35/ Ive looked att this example but it doesnt have a class before it changes.
Please give me jsfiddle example.
I solved it like this:
HTML
<button class="btn btn-primary playPauseBtn" onclick="myFunction()" type="button">
<span id="playPauseSpanId" class="glyphicon glyphicon-play"></span>
</button>
Javascript
function myFunction(){
wavesurfer.playPause();
if(wavesurfer.isPlaying() == true){
document.getElementById("playPauseSpanId").className ="glyphicon glyphicon-pause"
}else {
document.getElementById("playPauseSpanId").className ="glyphicon glyphicon-play"
}
}
Here small algorithm for change class.
var playPauseBtn = document.querySelector('.playPauseBtn');
if(playPauseBtn){
var span = document.querySelector('.playPauseBtn .glyphicon');
playPauseBtn.addEventListener('click', function(){
if (span) {
if (span.classList.contains('glyphicon-play')) {
span.classList.remove('glyphicon-play');
span.classList.add('glyphicon-pause');
} else {
span.classList.remove('glyphicon-pause');
span.classList.add('glyphicon-play');
}
}
},false);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary playPauseBtn" onclick="wavesurfer.playPause()" type="button">
<span class="glyphicon glyphicon-play"></span>
</button>

How to toggle button icon and description javascript

here is my problem. I need on click to change button icon and on another click to go to original state, like +,- and span description like home/back
i dont know what to do. Pleas help.
Here is html...
<div class="navbar-left left">
<button class="toggle btn mr2 white " >
<i class="fa fa-home fa-2x "></i>
<span class="mobile-hide ">Home</a>
</button>
</div>
and bad js
if ($('.toggle').hasClass('fa fa-home fa-2x')) {
$('.toggle').toggleClass('fa fa-home ').html('<span class="mobile-hide ">Home</a>');
} else($('.toggle').hasClass('fa fa-home ')) {
$('.toggle').toggleClass('fa fa-home fa-2x ').html('<span class="mobile-hide ">Back</a>');
}
toggleMenu();
});
You can
jQuery(function($){
$('.toggle').click(function () {
var $i = $(this).find('i').toggleClass('fa-2x');
$(this).find('span.mobile-hide').html($i.hasClass('fa-2x') ? 'Home' : 'Back')
})
})
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navbar-left left">
<button class="toggle btn mr2 white" >
<i class="fa fa-home fa-2x"></i>
<span class="mobile-hide">Home</span>
</button>
</div>
You can only use .hasClass() to check for a single class Name.
In order to check for many class names I guess is better get the class attribute string and check with .indexOf()
if ($('.toggle').attr("class").indexOf('fa fa-home fa-2x') != -1) {
The same happens with toggleClass. You have to break it down:
$('.toggle').toggleClass('fa').toggleClass('fa-home').toggleClass('fa-2x')
You might be able to achieve this effect with the ::after pseudo-element. Just change the content property as appropriate based on some class on the button.
A simplified example:
$(function () {
$('#toggle').click(function () {
$(this).toggleClass('on');
});
});
.icon::after {
content: '+';
}
.text::after {
content: 'Home';
}
.on .icon::after {
content: '-'
}
.on .text::after {
content: 'Back'
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<button id="toggle">
<i class="icon"></i>
<span class="text"></span>
</button>

Categories