0

Es la primera vez que trabajo con jQuery y necesito transformar este código JS a jQuery, al que llamo desde un botón en html. La idea es que el botón con id=btnFiltroAvanzado se oculte al pulsarlo y se muestre el botón id=btnSimple, e igual al contrario.

HTML:

<p:button id=btnFiltroAvanzado 
onclick="this.classList.add('p-d-none'); 
document.getElementById('btnSimple').classList.remove('p-d-none');"/>

<p:button id=btnSimple
styleClass="p-d-none"
onclick="this.classList.add('p-d-none'); 
document.getElementById('btnFiltroAvanzado ').classList.remove('p-d-none');"/>

donde la clase p-d-none es simplemente

.p-d-none{
   display: none !important;
}

He probado creando la función:

function swapVisibility(idHide, idShow) {
    $("#idHide").addClass("p-d-none");
    $("#idShow").removeClass("p-d-none");
    return false;
}

<p:button id=btnFiltroAvanzado 
onclick="swapVisibility('btnFiltroAvanzado', 'btnSimple')">

pero no funciona.

Muchas gracias

2
  • Los id de los button son btnSimple y btnFiltroAvanzado, pero en jQuery estas usando idHide y idShow
    – Marcos
    el 29 jul. 2022 a las 11:07
  • 2
    jQuery es una librería de Javascript. Se puede usar jQuery cuando escribes código javascript, pero no se traduce de JS a jQuery el 29 jul. 2022 a las 13:08

5 respuestas 5

2

No se en jquery, que no lo he usado nunca, pero con javascript puedes hacerlo. Solo tienes que agregarle una clase a los 2 botones para identificarlos y luego añadir un addEventListener para que añada o quite la clase.

Esto sería el html

    <p:button class="btn-filtro">filtro simple</p:button>
    <p:button class="btn-filtro p-d-none">filtro avanzado</p:button>

Y esto en la sección de script

    const filtros = document.getElementsByClassName("btn-filtro");
    for(let i=0; i<filtros.length; i++){
        filtros[i].addEventListener("click", mostrarOcultar);
    }
    function mostrarOcultar(){
        for(let i=0; i<filtros.length; i++){
            filtros[i].classList.toggle("p-d-none");
        }
    }
1

Te dejo una respuesta para que cambies directamente los estilos en la función según el botón que pulses.

function swapVisibility() {
    $("#btnFiltroAvanzado").css('display', 'none');
    $("#btnSimple").css('display', 'initial');
}
function classListadd() {
    $("#btnFiltroAvanzado").css('display', 'initial');
    $("#btnSimple").css('display', 'none');
}
<button id=btnFiltroAvanzado 
onclick= swapVisibility()>hola</button>

<button id=btnSimple
onclick=classListadd()>adios</button>


0

function swapVisibility(button) {
   if($(button).prop("id")=="btnSimple"){
      $(button).addClass("d-none")
      $("#btnFiltroAvanzado").removeClass("d-none")
   }else{
      $(button).addClass("d-none")
      $("#btnSimple").removeClass("d-none")
   }
}
.d-none{
  display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<button id="btnSimple"
onclick="swapVisibility(this)">Clickmeplis
</button>

<button id="btnFiltroAvanzado" class="d-none"
onclick="swapVisibility(this)">Clickme
</button>

Hay muchas formas de hacerlo con jquery, acá te dejo una de tantas posibilidades, ojala te sirva saludos. Aca te dejo mas información acerca de los métodos utilizados en este fragmento de código

0

He solucionado el problema.

El error se encontraba en el selector, el script correcto sería:

function swapVisibility(idHide, idShow) {
    $("#" + idHide).addClass("p-d-none");
    $("#" + idShow).removeClass("p-d-none");
    return false;
}
1
0
$( ".target" ).toggle()

.target es la clase de los elementos a ocultar mostrar.

Si necesitas mas control puedes usar .show() y .Hide() https://www.w3schools.com/jquery/jquery_hide_show.asp

1
  • Tal y como está redactada, tu respuesta no es clara. Por favor, pulsa en editar para añadir detalles adicionales que ayuden a los demás a entender cómo esto responde a la pregunta formulada. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    el 1 ago. 2022 a las 10:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.