0

introducir la descripción de la imagen aquí

Tengo este boton, que se genera por diferentes datos, pero quiero que el boton desaparezca luego de hacerle click

Que todo el Div se "oculte" luego de hacer click sobre el, (Asi los usuarios no puedan ver las cosas 2 veces)

Ya intente con esto: Funcion de Ocultar boton con JQuery

Y esto:

https://es.stackoverflow.com/questions/107630/hacer-clic-en-un-botón-y-esconder-un-div-en-jquery

Pero no me a funcionado

    <div class="col-sm-10 col-md-6 col-lg-7">
                                                        <div class="sport-table-wager">
                                                            @foreach($betOptions as $data)
                                                                <div class="progress-button-item sport-table-wager-button m-0">
                                                                    <a class="bet_button text-decoration-none"
                                                                       href="#0"
                                                                       data-toggle="modal" data-target="#sportModal"
                                                                       data-team-name="{{$data->option_name}}"
                                                                       data-confrontation="{{$question->match->name}}"
                                                                       data-id="{{$data->id}}"
                                                                       data-minamo="{{$data->min_amo}}"
                                                                       data-macthid="{{$question->match->id}}"
                                                                       data-ratioone="{{$data->ratio1}}"
                                                                       data-ratiotwo="{{$data->ratio2}}"
                                                                       data-betlimit="{{$data->bet_limit}}"
                                                                       data-questionid="{{$question->id}}"
                                                                       data-wager-count="{{$data->ratio1}} : {{$data->ratio2}}">
                                                                        <span>{{$data->option_name}}</span>
                                                                   <!--     <span class="sport-table-wager-button-count">{{$data->ratio1}}
                                                                            : {{$data->ratio2}}</span> --> 
                                                                    </a>

                                                                    @php
                                                                        $percent =  percent($data->totalInvestByOptions(), $question->totalInvest())
                                                                    @endphp
                                                                  
                                                                </div>
                                                            @endforeach

                                                        </div>
                                                    </div>

9
  • @BetaM es.stackoverflow.com/questions/182083/… esto Commented el 15 oct. 2020 a las 17:38
  • Lo que hayas intentado (implementado en tu código), debe ir en la pregunta, te lo comento por que exponernos una publicación con varias respuestas no nos dice que llevas hecho tú
    – user128299
    Commented el 15 oct. 2020 a las 17:39
  • Ok! ya lo hago! gracias :D Commented el 15 oct. 2020 a las 17:40
  • No entiendo muy bien, pero creo que esos datos si vas a condicionar algo deberías guardarlo dentro de tu BBDD, de tal manera que si vuelve a entrar a la vista tenga aun la condición dentro, no se si sea recomendable hacerlo desde el front, al menos que solo ingrese una vez a dicha pagina. Commented el 15 oct. 2020 a las 17:54
  • 2
    ¿Responde esto a tu pregunta? Funcion de Ocultar boton con JQuery
    – user128299
    Commented el 15 oct. 2020 a las 18:01

3 respuestas 3

0

puedes hacerlo con evento click y crear una función que diga ocultar al elemento que lo quieras ocultarlo dale un id

<div class="sport-table-wager" id="grupo1">
    <input type="submit" value="Ocultar" onclick="ocultar('grupo1')">
</div>
 
function ocultar(id){
    var elemento = document.getElementById(id);
    elemento.style.display = "none";
}

Tambien puedes llamar a la funcion ocultar(id) al final de tu codigo jquery o javascript q tengas

4
  • @BetaM no entiendo tu comentario? lo que realicé es javascript
    – wrocano
    Commented el 15 oct. 2020 a las 17:58
  • Solo lo que acabo de modificar editando tu aporte
    – user128299
    Commented el 15 oct. 2020 a las 17:58
  • @wrocano esto me sirvió muchisimo, pero el problema es que cuando se recarga la pagina, el boton vuelve a aparecer, en mi BBDD cada usuario tiene un user_ID, no puedo hacer que luego de que ese usuario use ese boton no le vuelva a aparecer mas? Commented el 15 oct. 2020 a las 20:03
  • para ello deberías registrar en tu base de datos en un campo boolean(true, false) si fue o no ya realizado el click, al momento de recuperar los datos verificar si la opción fue clickeada (campo == true) pues mandarlo a ocultar con un style = "display:none" en el div contenedor de ese botón. desconozco como estés realizando la parte de la renderización de los componentes, por tanto no puedo ayudar de mejor manera <div class="sport-table-wager" style="display:none">
    – wrocano
    Commented el 15 oct. 2020 a las 20:44
0

a mi me parece mas fácil con jquery, solo tienes que importarlo y listo Mira este ejemplo, puedes ocultar o mostrar y los eventos los defines con 1 o 2 clicks

<!--Importar la libreria jquery-->
<script type='text/javascript' 
src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!--define las funciones cuando se presiona el elemento con selector mostrar
click (Un solo click) aplica fadeOut que oculta el elemento con selector id mostrar
y dblclick (dos clicks) que aplica fadeIn que hace visible el elemento con selector id 
mostrar-->
<script type="text/javascript">
$(document).ready(function() {
 $("#mostrar").click(function(event) {
 $("#mostrar").fadeOut();
});
$("#mostrar2").dblclick(function(event) {
 $("#mostrar").fadeIn();
 });
});
</script>

<div id="div3">
<label for="mostrar">Un click desaparece</label><br><br>
<input type="button" id="mostrar" value="1 Click">
<br><br>
<label for="mostrar">Dos clicks aparece</label><br><br>
<input type="button" id="mostrar2" value="2 Clicks">
</div>

Lo que debes tener en cuenta son los selectores que son los ID de los tags, revisa esta pagina que me parecio demasiado completa

https://norfipc.com/codigos/jquery-todos-selectores-eventos-metodos-funciones.php

2
  • Esto me gusto, y si por ejemplo quiero que un boton (En vez de recargar toda la pagina) lo mande a la base de datos por AJAX con JQuery, como puedo hacerlo? ejemplo de boton: @if(Auth::user()) <div class="form-element mt-2"> <button type="submit"><span>@lang('ACCEPT')</span> </button> </div> @else Commented el 15 oct. 2020 a las 19:36
  • AJAX envía una petición asincrónica al servidor, la cuestión es quien ejecuta la función AJAX, ej: este selector ejecuta la función <select id="estprincipal" onchange="obtenerEstSec(this.value);"> al cambiar y la funcion ejecuta un php asincronico, en este caso: function obtenerEstSec(val){ $.ajax ({ type: "POST", url: "get_estsec.php", <!-- este php puede hacer cualquier cosa--> data:'estcas_principal='+val, <!--estos son los datos que envias al php--> success: function(data).... te recomiendo uniwebsidad.com/libros/fundamentos-jquery/capitulo-7/… Commented el 15 oct. 2020 a las 20:03
0

Yo creo que es mas fácil hacerlo con JQuery usando el fadeOut()

<div class="progress-button-item sport-table-wager-button m-0" onclick="OcultarButton(this)">
    <a class="bet_button text-decoration-none"></a>
</div>

function OcultarButton(btn)
{
    $(btn).fadeOut();
}
8
  • Gracias!, pero el problema es que cuando se recarga la pagina el boton vuelve a aparecer, (cuando se le da click a ese boton recarga la pagina) Commented el 15 oct. 2020 a las 19:57
  • Cada usuario tiene un ID con la función user_id, podría limitarlo, en el sentido de que despues de que ese usuario le de click no le vuelva a aparecer mas ese boton? Commented el 15 oct. 2020 a las 20:01
  • Podrías ponerle un estado y hacer un @if si el usuario ya registro eso. Pero, para que esta ese botón, cual es su funcionalidad (que datos pasa). O que datos devuelve $betOptions, si esta ligado con el user_id, puedes hacer lo que te dije anteriormente Commented el 15 oct. 2020 a las 20:07
  • Ese boton abre un Pop-up, en los cuales se muestra un texto y hay otro boton que para confirmar, (Luego todo se salva en la base de datos), en la base de datos hay un registro cuando un usuario acepta una propuesta (Estoy modificando un script en Laravel sobre eventos deportivos), son como "Predicciones" que el usuario acepta, y con cada una se descuentan sus "Coins" (Todo eso ya esta hecho y funciona) solo quiero que los usuarios puedan aceptar solo 1 vez cada predicción Commented el 15 oct. 2020 a las 20:13
  • Si estas usando modelos podrias intentar esto: En tu controlador declaras tu modelo, digamos: $predicciones = Prediccion::all(), despues eso le pasas a tu vista y en ella pones lo siguiente: @if( empty($predicciones->where('user_id',Auth::id())) ) <a class="btn"></a> @endif Commented el 15 oct. 2020 a las 20:31

Tu Respuesta

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

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