Estoy tratando de crear un botón de "tres vías" en JavaScript. Ya he creado la funcionalidad base aquí:
https://codepen.io/nico-cardenas/pen/GRoexoL
Puede alternar los botones cuando hace clic en él, pero parece que no puedo entender cómo puedo activar el "alternar" si hace clic en otro botón (no en el que hizo clic originalmente).
Estaba pensando en guardar el botón seleccionado actualmente en una variable, pero todavía estoy perdido.
var btn = $('.btn');
var isActive = false;
btn.click(function() {
if (!isActive) {
$(this).css({
'backgroundColor': 'blue'
});
isActive = true;
} else {
$(this).css({
'backgroundColor': 'red'
});
isActive = false;
}
})
.btn {
width: 40px;
height: 40px;
background-color: red;
margin-bottom: 20px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn"></div>
<div class="btn"></div>
0
Nico Cardenas
24 jul. 2020 a las 13:44
2 respuestas
La mejor respuesta
¿Te refieres a esto?
const btn = $('.btn');
btn.on("click", function() {
btn.not(this).removeClass("active"); // remove all other buttons's active
$(this).toggleClass("active"); // toggle this button
})
.btn {
width: 40px;
height: 40px;
background-color: red;
margin-bottom: 20px;
cursor: pointer;
}
.active {
background-color: blue
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn"></div>
<div class="btn"></div>
Para audio
const btn = $('.btn');
btn.on("click", function() {
let audio;
btn.not(this).each(function() {
$(this).removeClass("active"); // remove all other buttons's active
audio = $("#" + $(this).data("id")).get(0); // DOM audio
if (audio) {
audio.pause();
audio.currentTime = 0;
}
})
audio = $("#" + $(this).data("id")).get(0); // DOM Audio
if ($(this).is(".active")) {
audio.pause();
audio.currentTime = 0;
} else audio.play(); // start the DOM audio
$(this).toggleClass("active"); // toggle this button
})
.btn {
width: 40px;
height: 40px;
background-color: red;
margin-bottom: 20px;
cursor: pointer;
}
.active {
background-color: blue
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn" data-id="mp3_1"></div>
<div class="btn" data-id="mp3_2"></div>
<audio id="mp3_1" src="https://freesound.org/data/previews/171/171671_2437358-lq.mp3" />
<audio id="mp3_2" src="https://freesound.org/data/previews/254/254819_4597795-lq.mp3" />
3
mplungjan
24 jul. 2020 a las 11:10
Puede lograrlo a través de .on
:
var btn = $('.btn');
var isActive = false;
btn.on('click', (function() {
if (!isActive) {
$(this).css({
'backgroundColor': 'blue'
});
isActive = true;
} else {
$(this).css({
'backgroundColor': 'red'
});
isActive = false;
}
}));
.btn {
width: 40px;
height: 40px;
background-color: red;
margin-bottom: 20px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn"></div>
<div class="btn"></div>
0
mplungjan
24 jul. 2020 a las 11:16
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.