The first button onclick works, but when the onclick is set to stopChrono() instead of chrono(), the stopChrono() doesn't work. This only happens in Chrome, because in Mozilla and Edge, works perfectly.
This is the code of the web:
https://jsbin.com/mononohute/edit?html,js,output
P.S: This post isn't the same as the other "Onclick doesn't work in Chrome" because the circunstances are totally diferent.
I restructured the click event handler.
$('#start').on('click', function(e) {
$(this).attr('value', function(_, text) {
if (text === 'Stop!') {
$(this).attr('class', 'w3-btn w3-green');
stopChrono();
return 'Start!';
} else {
$(this).attr('class', 'w3-btn w3-red');
chrono();
return 'Stop!';
}
});
});
While the original was this:
$('#start').on('click', function(e) {
$(this).attr('value', function(_, text) {
$(this).attr("class", "w3-btn w3-red")
return text === 'Stop!' ? 'Start!' : 'Stop!';
})
if ($(this).attr('onclick') == 'chrono()') {
$(this).attr('onclick', 'stopChrono()')
} else {
$(this).attr('onclick', 'chrono()')
$(this).attr('class', 'w3-btn w3-green')
}
});
It works now. I removed the html onclick handler because else chrono() fired twice.
var start = document.getElementById('start'),
reset = document.getElementById('reset'),
counter = document.getElementById('counter'),
sCounter = 0,
mCounter = 0,
hCounter = 0,
displayChrono = function() {
if (sCounter < 10) {
sCounter = "0" + sCounter;
}
if (mCounter < 10) {
mCounter = "0" + mCounter;
}
if (hCounter < 10) {
hCounter = "0" + hCounter;
}
counter.value = hCounter + ":" + mCounter + ":" + sCounter;
},
chronometer,
openchrono = document.getElementById('openchrono'),
chronowinin = document.getElementById('chronowinin');
function chrono() {
chronometer = setInterval(function() {
mCounter = +mCounter;
hCounter = +hCounter;
sCounter = +sCounter;
sCounter++;
if (sCounter == 60) {
mCounter++;
sCounter = 0;
}
displayChrono();
}, 1000);
}
function resetChrono() {
sCounter = 0;
mCounter = 0;
hCounter = 0;
displayChrono();
}
function stopChrono() {
clearInterval(chronometer);
}
$('#openchrono').click(function() {
if ($(this).attr('value') == '+') {
$(this).attr('value', '-');
$('#chronowinin').slideDown();
} else {
$(this).attr('value', '+');
$('#chronowinin').slideUp();
}
});
$('#start').on('click', function(e) {
$(this).attr('value', function(_, text) {
if (text === 'Stop!') {
$(this).attr('class', 'w3-btn w3-green');
stopChrono();
return 'Start!';
} else {
$(this).attr("class", "w3-btn w3-red");
chrono();
return 'Stop!';
}
});
});
//
// $('#start').click(function() {
// if ($(this).attr('value') == 'Start!') {
// $(this).attr('value', 'Stop!');
// $(this).attr('class', 'w3-btn w3-red')
// $('#start').click(stopChrono());
// }});
//else {
// $(this).attr('value', 'Start!');
// $(this).attr('class', 'w3-btn w3-green');
// $('#start').click(stopChrono()
// // function() {
// // function stopChrono() {
// // clearInterval(chronometer);
// // }
// //}
// );
// }});
//
//
// openchrono.addEventListener("click", function() {
// chronowinin.className = "w3-container w3-row";
// openchrono.innerHTML = "-";
// openchrono.id = "closechrono"
//
// closechrono.addEventListener("click", function() {
// var closechrono = document.getElementById('closechrono');
// chronowinin.className = "w3-container w3-row hidden";
// openchrono.innerHTML = "+";
// closechrono.id = "openchrono"
// });
// });
// )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Everything - everything you'll want is here.</title>
</head>
<body>
<div class="w3-row w3-container">
<div class="w3-col m3 w3-text-red">
<p></p>
</div>
<div class="w3-col m6 w3-center w3-text-white w3-xxlarge">
<p>
<i>Everything you want is here.</i>
</p>
</div>
<div class="w3-col m3 w3-text-red">
<p></p>
</div>
</div>
<div id="chronowin" class="w3-container w3-row">
<div class="w3-col m3 w3-text-red">
<p></p>
</div>
<div class="w3-col m6 w3-center w3-xlarge w3-white w3-text-red showhover">
<p>
Chronometer
<input type="button" value="+" id="openchrono" class="w3-btn-floating w3-red" style="right:5%; float:right; border:none"></input>
</p>
</div>
<div class="w3-col m3 w3-text-red">
<p></p>
</div>
</div>
<div id="chronowinin" class="w3-container w3-row" style="display: none">
<div class="w3-col m3 w3-text-red">
<p></p>
</div>
<div class="w3-col s 12 m6 w3-center w3-white w3-text-grey">
<p></p>
<input id="counter" type="text" name="name" value="00:00:00" readonly="readonly" class="w3-text-grey w3-center">
<br>
<p></p>
<input id="start" type="button" name="name" value="Start!" class="w3-btn w3-green">
<!-- <input type="button" name="name" value="Stop!" class="w3-btn w3-red" onclick="stopChrono()"> -->
<input id="reset" type="button" name="name" value="Reset!" class="w3-btn w3-blue" onclick="resetChrono()">
<p></p>
</div>
<div class="w3-col m3 w3-text-red">
<p></p>
</div>
</div>
<script src="js/jquery.js" charset="utf-8"></script>
<script src="js/chronometer.js" charset="utf-8"></script>
</body>
</html>
jQuery conveniently stores event listeners, so if you define them in separate functions, you can easily remove them:
function stopChrono() {
clearInterval(chronometer);
$(this).attr('class', 'w3-btn w3-green')
$('#start').off('click', stopChrono)
$('#start').on('click', startChrono)
}
function startChrono(e) {
$(this).attr('value', function (_, text) {
$(this).attr("class", "w3-btn w3-red")
return text === 'Stop!' ? 'Start!' : 'Stop!';
})
$('#start').off('click', startChrono)
$('#start').on('click', stopChrono)
}
$('#start').on('click', startCrono);
Once the chrono is started, I removed the 'click' event listener because the next click should not start the chrono. I also added the stopChrono 'click' event listener because it should stop the chrono.
The reverse is true for stopChrono(): the 'click' listener is disconnected from stopChrono, and reconnected to startChrono.
Now you should be able to go back and forth.
Related
I am trying to make a step process with JavaScript.
And I want it when it reaches the step 3, the color changes to another color.
I tried a lot, but I didn't succeed.
Picture how step process works
Picture how I want it to work
$(document).ready(function() {
var i = 1;
var id = setInterval(steps, 700);
function steps() {
if (i == 4) {
clearInterval(id);
} else {
$(".step" + i).css('background-color', 'rgb(134 209 109)');
i++;
}
}
$(".btn-next").on("click", function() {
$('.page-1').fadeOut(1000, function() {
$('.page-2').fadeIn(1000);
});
var interval = setInterval(slide, 1200)
d = 1;
function slide() {
if (d == 6) {
clearInterval(interval);
$('.btn-next-two').fadeIn();
$('.search').fadeOut();
} else {
$(".ship-" + d).addClass('slide-in-left');
$(".ship-" + d).css('display', 'block');
d++;
}
}
});
$(".btn-next-two").on("click", function() {
$('.page-2').fadeOut(1000, function() {
$('.page-3').fadeIn(1000);
});
});
$('.btn-delivery').on('click', function() {
$('.page-3').fadeOut(1000, function() {
$('.page-4').fadeIn(1000);
});
});
$('.btn-time').on('click', function() {
$('.page-4').fadeOut(1000, function() {
$('.page-5').fadeIn(1000);
});
});
});
step {
min-height: 20px;
margin-right: 2px;
border-radius: 14px;
background-color: #a9b7b9;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-2 col-sm-1 offset-2 offset-sm-4 step1 step">
</div>
<div class="col-2 col-sm-1 step2 step">
</div>
<div class="col-2 col-sm-1 step3 step">
</div>
<div class="col-2 col-sm-1 step4 step">
Just put
else if(i == 3){
$(".step"+i).css('background-color','red');
i++;
}
on the condition.
There is a tiny issue in your javascript code.
I updated the function step.
function steps(){
if(i == 5){
clearInterval(id);
}
else if(i == 3) {
$(".step"+i).css('background-color','red');
i++;
}
else{
$(".step"+i).css('background-color','rgb(134 209 109)');
i++;
}
}
Here is full code.
$(document).ready(function(){
var i = 1;
var id = setInterval(steps,700);
function steps(){
if(i == 5){
clearInterval(id);
}
else if(i == 3) {
$(".step"+i).css('background-color','red');
i++;
}
else{
$(".step"+i).css('background-color','rgb(134 209 109)');
i++;
}
}
$( ".btn-next" ).on( "click", function() {
$('.page-1').fadeOut(1000, function(){
$('.page-2').fadeIn(1000);
});
var interval = setInterval(slide,1200)
d = 1;
function slide(){
if(d == 6){
clearInterval(interval);
$('.btn-next-two').fadeIn();
$('.search').fadeOut();
}
else{
$(".ship-"+d).addClass('slide-in-left');
$(".ship-"+d).css('display','block');
d++;
}
}
});
$( ".btn-next-two" ).on( "click", function() {
$('.page-2').fadeOut(1000, function(){
$('.page-3').fadeIn(1000);
});
});
$('.btn-delivery').on('click',function(){
$('.page-3').fadeOut(1000, function(){
$('.page-4').fadeIn(1000);
});});
$('.btn-time').on('click',function(){
$('.page-4').fadeOut(1000, function(){
$('.page-5').fadeIn(1000);
});});
});
.step{
min-height:20px;
margin-right:2px;
border-radius:14px;
background-color:#a9b7b9;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="col-2 col-sm-1 offset-2 offset-sm-4 step1 step">
</div>
<div class="col-2 col-sm-1 step2 step">
</div>
<div class="col-2 col-sm-1 step3 step">
</div>
<div class="col-2 col-sm-1 step4 step">
</body>
</html>
I am in the middle of the Pig Dice problem and I am trying to use the function switchPlayers() to switch between player1 and player2. When clicking "Roll Dice", it appears to switch to the second player but then no longer switches to the first player. After re-working it a few times, I'm starting to think the issue may be that even if Player2 updates to .isTurn = false the function is longer being called? I appreciate any pointers here (Note, haven't worked on the New Game or Hold Button yet)Thank you!
JSFiddle
//business logic for dice
function Dice() {
this.diceValue = 1;
this.roll = 0;
}
function Player() {
this.score = 0;
this.dice = new Dice()
this.isTurn = true
}
//global Players
player1 = new Player();
player2 = new Player();
function switchPlayers() {
if (player1.dice.roll === 0) {
player1.isTurn = false;
} else if (player2.dice.roll === 0) {
player2.isTurn = false;
}
}
Dice.prototype.rollDice = function() {
this.diceValue = Math.floor((Math.random() * 6) + 1);
if (this.diceValue === 1) {
this.roll = 0;
} else {
this.roll = this.diceValue;
}
}
Player.prototype.calcScore = function() {
this.dice.rollDice()
if (this.dice.roll === 0) {
switchPlayers();
} else {
this.score += this.dice.roll
}
}
//ui logic
$(document).ready(function() {
$("button.btn-roll").click(function(event) {
if (player1.isTurn !== false) {
player1.calcScore();
$('#p1-total').html(player1.score);
$('#p1-roll').html(player1.dice.roll);
} else if (player2.isTurn === true) {
player2.calcScore();
$('#p2-total').html(player2.score);
$('#p2-roll').html(player2.dice.roll)
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,600" rel="stylesheet" type="text/css">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="js/jquery-3.5.1.js"></script>
<script src="js/scripts.js"></script>
<title>Pig Dice!</title>
</head>
<body>
<div class="wrapper clearfix">
<div class="player-1-panel active">
<div class="player-name" id="name-0">Player 1</div>
<div class="player1-score">
<p>this roll points: <span id="p1-roll"></span></p>
<p>
total: <span id="p1-total"></span>
</p>
</div>
</div>
</div>
<div class="player-2-panel">
<div class="player-name" id="name-1">Player 2</div>
<div class="player1-score">
<p>this roll: <span id="p2-roll"></span></p>
<p>
total: <span id="p2-total"></span>
</p>
</div>
</div>
</div>
<button class="btn-new"><i class="ion-ios-checkmark"></i>New game</button>
<button class="btn-roll"><i class="ion-ios-loop"></i>Roll dice</button>
<button class="btn-hold"><i class="ion-ios-download-outline"></i>Hold</button>
<img src="img/die5.png" alt="Dice" class="dice die1">
</div>
</body>
</html>
Keeping your logic, i have reviewed your code, added some tips (button hold), so you could easily understant what i have done and increase yours skills:
function initGame(){
//selectRandomly wich players begins
idToPlay = Math.floor((Math.random()*maxNumberPlayers));
for(let p = 0;p < maxNumberPlayers;p++){
let id = '#p' + p;
$(id + '-action').html('');
$(id + '-name').text(players[p].name);
$(id + '-total').html(players[p].score);
$(id + '-roll').html('--');
$(id + '-round').html('--');
$(id + '-dice').html('--');
}
$('#p' + idToPlay + '-action').html('<b>** Its your turn! **</>');
}
//business logic for dice
function Dice() {
this.diceValue=1;
this.roll=0;
this.round=0;
}
function Player(name) {
this.name = name
this.score = 0;
players.push(this);
}
//global Players
players = [];
new Player("John");
new Player("Peter");
maxNumberPlayers = players.length;
dice = new Dice();
idToPlay = -1;//first player will be choosen by initGame
function switchPlayers() {
displayResult();
if(++idToPlay == maxNumberPlayers) idToPlay = 0;
dice.round = 0;
$( 'span[id$="-action"]').html('');
$('#p' + idToPlay + '-action').html('<b>** Its your turn! **</>');
}
Dice.prototype.rollDice = function() {
this.diceValue = Math.floor((Math.random()*6)+1);
if (this.diceValue === 1) {
this.roll = 0;
this.round = 0
} else {
this.roll = this.diceValue;
this.round += this.roll;
}
}
Player.prototype.calcScore = function(isHoldButton = false) {
dice.rollDice();
if (dice.roll === 0) {
dice.round = 0;
switchPlayers();
} else {
this.round += dice.roll;
displayResult();
}
}
function displayResult(){
let id = '#p' + idToPlay;
$(id + '-name').html(players[idToPlay].name);
$(id + '-total').html(players[idToPlay].score);
$(id + '-roll').html(dice.roll);
$(id + '-round').html(dice.round);
$(id + '-dice').html(dice.diceValue);
}
//ui logic
$(document).ready(function() {
initGame();
$("button.btn-roll").click(function() {
players[idToPlay].calcScore();
});
$("button.btn-hold").click(function() {
players[idToPlay].score += dice.round;
switchPlayers();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,600" rel="stylesheet" type="text/css">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="js/jquery-3.5.1.js"></script>
<script src="js/scripts.js"></script>
<title>Pig Dice!</title>
</head>
<body>
<p>Rule: If you roll a 1, you will receive 0 roll points for the round and it will be the other player's turn.
</p>
<div class="wrapper clearfix">
<div class="player-0-panel active">
<div class="player-name"><span id="p0-name">Player 1</span><span> </span><span id="p0-action"></span></div>
<div class="player0-score">
<p>Dice points:<span id="p0-dice"></span>
<span> </span>Roll points:<span id="p0-roll"></span>
<span> </span>Round points:<span id="p0-round"></span>
<span> </span>total:<span id="p0-total"></span>
</p>
</div>
</div>
<div class="player-1-panel">
<div class="player-name"><span id="p1-name">Player 1</span><span> </span><span id="p1-action"></span></div>
<div class="player1-score">
<p>Dice points:<span id="p1-dice"></span>
<span> </span>Roll points:<span id="p1-roll"></span>
<span> </span>Round points:<span id="p1-round"></span>
<span> </span>total:<span id="p1-total"></span>
</p>
</div>
</div>
<button class="btn-new"><i class="ion-ios-checkmark"></i>New game</button>
<button class="btn-roll"><i class="ion-ios-loop"></i>Roll dice</button>
<button class="btn-hold"><i class="ion-ios-download-outline"></i>Hold</button>
<img src="img/die5.png" alt="Dice" class="dice die1">
</div>
</body>
</html>
I have this HTML:
<div>
<button type="button" id="a"></button>
</div>
<div>
<button type="button" id="b"></button>
</div>
<div>
<button type="button" id="c"></button>
</div>
<div class="hidden" id="a1">
<p>text1</p>
</div>
<div class="hidden" id="b1">
<p>text2</p>
</div>
<div class="hidden" id="c1">
<p>text3</p>
</div>
<div class="hidden" id ="content">
<p>text4</p>
</div>
and CSS:
.hidden {
display: none}
.shows {
display: block}
I want that if I press "a" shows "a1" and "content", b shows "b1" and "content"...
const a = document.getElementById("a")
const b = document.getElementById("b")
const c = document.getElementById("c")
const a1 = document.getElementById("a1")
const b1 = document.getElementById("b1")
const c1 = document.getElementById("c1")
const content = document.getElementById("content")
a.addEventListener('click', function (event) {
if (content.className === "hidden") {
content.className += " shows";
}
if (a1.className === "hidden") {
a1.className += " shows";
} else {
a1.className = "hidden";
}
b.addEventListener('click', function (event) {
if (content.className === "hidden") {
content.className += " shows";
}
if (b1.className === "hidden") {
b1.className += " shows";
} else {
b1.className = "hidden";
}
c.addEventListener('click', function (event) {
if (content.className === "hidden") {
content.className += " shows";
}
if (c1.className === "hidden") {
c1.className += " shows";
} else {
c1.className = "hidden";
}
but i want that when i press one button and all buttons are hidden "content" is hidden too, i know a way to make this is adding this code of each "click"
if (a1.className === "hidden" && b1.className === "hidden" && c1.className === "hidden") {
content.classList.remove("shows");
}
Nut I need another way to make it because I have to add a button each x days... may be adding an array with all buttons
const d1 = [a1, b1, c1]
and add a for in each "click" but I don't know how to do it.
Your question isn't completely clear. Do you mean something like this?
[...document.querySelectorAll("button")].forEach(function(button) {
button.addEventListener("click", function(evt) {
var element = document.getElementById(event.target.id + "1")
if (element.style.display == "block") {
element.style.display = "none";
} else {
element.style.display = "block";
document.getElementById("content").style.display = "block";
}
if (document.getElementById("a1").style.display == "none" && document.getElementById("b1").style.display == "none" && document.getElementById("c1").style.display == "none") {
document.getElementById("content").style.display = "none"
}
})
})
<div>
<button type="button" id="a">a</button>
</div>
<div>
<button type="button" id="b">b</button>
</div>
<div>
<button type="button" id="c">c</button>
</div>
<div id="a1" style="display:none;">
<p>text1</p>
</div>
<div id="b1" style="display:none;">
<p>text2</p>
</div>
<div id="c1" style="display:none;">
<p>text3</p>
</div>
<div id="content" style="display:none;">
<p>text4</p>
</div>
i have a small problem - i can add a file on click. only the dropzone dont work.
If I drag and drop the file in the browser, will be displayed and not uploaded.
$('#trigger-attachment').click(function(event) {
if ($('#attachment-1').val() == '') {
console.log('trigger 1')
$('#attachment-1').click();
$('.not-needed-if-pdf-provided').remove();
} else if ($('#attachment-2').val() == '') {
console.log('trigger 2')
$('#attachment-2').click();
$('.not-needed-if-pdf-provided').remove();
console.log('trigger 2')
} else if ($('#attachment-3').val() == '') {
console.log('trigger 3')
$('#attachment-3').click();
$('.not-needed-if-pdf-provided').remove();
} else {
alert('Maximal 3 Dokumente auswählbar. Entfernen Sie zunächst eines um ein anderes auszuwählen. Tipp: Fügen Sie mehrere Dateien zu einem PDF zusammen.');
}
});
$('#trigger-attachment').on('dragenter', function() { if ($('input.attachment.active').length > 0) $(this).addClass('dragging'); });
$('#trigger-attachment').on('drop', function() { $(this).removeClass('dragging'); });
$('#trigger-attachment').on('dragleave', function() { $(this).removeClass('dragging'); });
$('#trigger-attachment').on('dragexit', function() { $(this).removeClass('dragging'); });
$('#trigger-attachment').on('dragend', function() { $(this).removeClass('dragging'); });
$('input.attachment').click(function(event) {
event.stopImmediatePropagation();
console.log('click ' + $(this).attr('id'));
});
$('input.attachment').change(function() {
console.log('change');
$(this).removeClass('active');
var number = $(this).data('no');
var displayElement = $('#display-attachment-' + number);
if ($(this).val() == "") {
$(this).addClass('active');
displayElement.empty();
} else {
var file = this.files[0];
displayElement.html('<div onclick="$(\'#attachment-'+number+'\').val(\'\').addClass(\'active\');$(\'#display-attachment-'+number+'\').empty();">× '+file.name+'</div>');
}
});
#################### Here is the HTML INPUT ->
<div class="col-sm-12 col-md-12 col-lg-8 offset-lg-2">
<div id="trigger-attachment" class="text-center">
<img src="https://d17blcsvifkhsu.cloudfront.net/sites/5b056e1c85cde904fb840d8f/theme/images/share.svg?1540384342" style="max-width:40px;">
<p class="green-label">
(optional)<br>
</p>
<input class="attachment active" id="attachment-3" name="content[attachment_3]" data-no="3" type="file">
<input class="attachment active" id="attachment-2" name="content[attachment_2]" data-no="2" type="file">
<input class="attachment active" id="attachment-1" name="content[attachment_1]" data-no="1" type="file">
</div>
<div id="display-attachments">
<div id="display-attachment-1" class="display-attachment"></div>
<div id="display-attachment-2" class="display-attachment"></div>
<div id="display-attachment-3" class="display-attachment"></div>
</div>
</div>
##### this class should just hide another one
<div class="row pb-3 not-needed-if-pdf-provided">
I have this HTML markup:
<ul style="text-align: center;" class="product-wizard-bar">
<li style="cursor:default" class="active" data-display="categories-picker" id="tab1">Seleccionar categoría</li>
<li data-display="product-create-step-2" id="tab2" class="">Datos</li>
<li style="display: none" data-display="product-create-step-3" id="tab3">Variaciones</li>
<li data-display="product-create-step-4" id="tab4" class="">Detalles del Producto</li>
<li data-display="product-create-step-5" id="tab5" class=""><a class="last" style="cursor:default" href="#">Condiciones de Venta</a></li>
</ul>
<fieldset title="Categoría" class="fstep" id="categories-picker" style="display: none;"></fieldset>
<fieldset style="display: none;" title="Producto" class="fstep" id="product-create-step-2"></fieldset>
<fieldset style="display: none" title="Variaciones" id="product-create-step-3"></fieldset>
<fieldset style="display: none;" title="Detalles" class="fstep" id="product-create-step-4"></fieldset>
<fieldset style="display: none;" title="Condiciones" class="fstep" id="product-create-step-5"></fieldset>
<div style="position:absolute; right:0px; margin-top: 20px; margin-bottom: 20px;">
<button disabled="disabled" id="previous-step" name="previous" type="button" class="button">« Anterior</button>
<button id="next-step" name="next" type="button" class="button">Siguiente »</button>
</div>
And this is the jQuery code to handle next/previous steps:
$('fieldset.fstep').hide().eq(0).show();
$('#next-step').click(function() {
var current = $('fieldset.fstep:visible'), next = current.next('fieldset.fstep');
var category_id = $("#selected_category").val();
if (next.length === 0) {
next = current.nextUntil('fieldset.fstep').next('fieldset.fstep');
}
current.hide();
next.show();
if (next.nextUntil('fieldset.fstep').next('fieldset.fstep').add(next.next('fieldset.fstep')).length === 0) {
$("#next-step").prop("disabled", true);
}
$("#previous-step").prop("disabled", false);
});
$('#previous-step').click(function() {
var current = $('fieldset.fstep:visible'), prev = current.prev('fieldset.fstep');
var category_id = $("#selected_category").val();
if (prev.length === 0) {
prev = current.prevUntil('fieldset.fstep').prev('fieldset.fstep');
}
current.hide();
prev.show();
if (prev.prevUntil('fieldset.fstep').prev('fieldset.fstep').add(prev.prev('fieldset.fstep')).length === 0) {
$("#previous-step").prop("disabled", true);
}
$("#next-step").prop("disabled", false);
});
$("#product_create").on("click", "#tab1, #tab2, #tab3, #tab4, #tab5", function() {
var div = $('#' + $(this).data('display'));
$("li.active").removeClass("active");
$(this).addClass('active');
if ($.trim(div.html()) !== '') {
$('#' + $(this).data('display')).show().siblings('fieldset').hide();
}
return false;
});
How I can change the active class to the element according to the fieldset I'm on? I mean when I click next/previous button?
Since the id of the displayed item and the data-display property of the wizard-bar items are same, you can use it to filter and add the active class
var $fsteps = $('fieldset.fstep').hide();
var $wizitems = $('.product-wizard-bar > li');
$fsteps.eq(0).show();
$('#next-step').click(function () {
var current = $fsteps.filter(':visible'),
next = current.next('fieldset.fstep');
var category_id = $("#selected_category").val();
if (next.length === 0) {
next = current.nextUntil('fieldset.fstep').next('fieldset.fstep');
}
current.hide();
next.show();
$wizitems.filter('.active').removeClass('active')
$wizitems.filter('[data-display="' + next.attr('id') + '"]').addClass('active')
if (next.nextUntil('fieldset.fstep').next('fieldset.fstep').add(next.next('fieldset.fstep')).length === 0) {
$("#next-step").prop("disabled", true);
}
$("#previous-step").prop("disabled", false);
});
$('#previous-step').click(function () {
var current = $fsteps.filter(':visible'),
prev = current.prev('fieldset.fstep');
var category_id = $("#selected_category").val();
if (prev.length === 0) {
prev = current.prevUntil('fieldset.fstep').prev('fieldset.fstep');
}
current.hide();
prev.show();
$wizitems.filter('.active').removeClass('active')
$wizitems.filter('[data-display="' + prev.attr('id') + '"]').addClass('active')
if (prev.prevUntil('fieldset.fstep').prev('fieldset.fstep').add(prev.prev('fieldset.fstep')).length === 0) {
$("#previous-step").prop("disabled", true);
}
$("#next-step").prop("disabled", false);
});
$("#product_create").on("click", "#tab1, #tab2, #tab3, #tab4, #tab5", function () {
var div = $('#' + $(this).data('display'));
$("li.active").removeClass("active");
$(this).addClass('active');
if ($.trim(div.html()) !== '') {
$('#' + $(this).data('display')).show().siblings('fieldset').hide();
}
return false;
});
Demo: Fiddle