Botón de palanca de tres vías

Question

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>

javascript jquery

0

Nico Cardenas 24 jul. 2020 a las 13:44

Answer 1

¿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

Answer 2

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

Botón de palanca de tres vías

2 respuestas

Nuevas preguntas

javascript