New question

Question:

 
  0  
 
Date: 26-06-2019 20:30:59 (In Spanish)

Ruleta Jquery[Resolved]

Tengo una ruleta hecha con jquery el codigo es de la pagina https://www.comerline.es/owl-roulette/ , genero los elementos de manera dinamica pero necesito capturar la descripcion aparte del id del objeto seleccionado el archivo js es este:
var stoping = false;
var itemSelected = 0;

jQuery(function ($) {
var $owl = $('.owl-carousel');

// Initialize Owl
$('.owl-carousel').owlCarousel({
center: true,
loop: true,
margin: 10,
nav: false,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
dots: false,
responsive: {
0: {
items: 3
},
600: {
items: 3
},
1000: {
items: 7
}
}
});

// Click in button Jump
$('#js-btn-jump').click(function (e) {
e.preventDefault();
stoping = false;
var max = $("#maximo").val();

// Random between 1 and 10
itemSelected = Math.floor((Math.random() * max) + 1);
var $jump = $(this);
$jump.html('Jugando...');
$jump.attr('disabled', 'disabled');
// Trigger autoplay owl
$owl.trigger('play.owl.autoplay', [100]);
// Slow speed by step
setTimeout(slowSpeed, 2000, $owl, 200);
setTimeout(slowSpeed, 4000, $owl, 250);
setTimeout(slowSpeed, 5000, $owl, 300);
setTimeout(stopAutoplay, 6000);
return false;
});

// Event changed Owl
$owl.on('changed.owl.carousel', function (e) {
if (stoping) {
// Examine only if roulette stop

var index = e.item.index;

var element = $(e.target).find(".owl-item").eq(index).find('.element-roulette');
var item = element.data('item');


if (item == itemSelected) {

// If element equals to random, stop roulette
$owl.trigger('stop.owl.autoplay');
$('#js-btn-jump').html('Girar');

$("#mostrar").css("display","none");
alert("Elemento Ganador!!!!" + item);


$.ajax({
type: "POST",
url: "ejemplo.php",
data: {id: item}, // Adjuntar los campos del formulario enviado.
success: function(data)
{
$("#cochi").html(data);

}
});

//$('#js-btn-jump').removeAttr('disabled');



}

}
});

// Showcase
slowSpeed($owl, 1400);

});

/**
* Reduce speed roulette
* @param {type} $owl
* @param {type} speed
* @returns {undefined}
*/
function slowSpeed($owl, speed) {
$owl.trigger('play.owl.autoplay', [speed]);
}

/**
* Stop autoplay roulette
* @returns {undefined}
*/
function stopAutoplay() {
stoping = true;
}
y los elementos html:
<div class="owl-carousel owl-theme">

<?php


$stmt = $DB_con->prepare('SELECT * FROM premios');

$stmt->execute();


if($stmt->rowCount() > 0)
{
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
extract($row);
?>
<div class="item element-roulette" data-item="<?php echo $row['id']; ?>"><img src="<?php echo $row['img']; ?>" alt="<?php echo $row['descripcion']; ?>">

</div>

<?php }
}
?>


</div>
La descripcion la agrego en la etiqueta alt de la imagen, cómo puedo hacer para capturarla?.Gracias.
Tags: JQuery - PHP Votes: 0 - Answers: 6 - Views: 13 Share on: Google Facebook Twitter LinkedIn Link
 

Answers:

  • Date: 27-06-2019 12:56:39 Pon la descripción e ID en un data-nombre (Aun que el id por lo regular lo puedes leer directo) , así en donde "seleccionas" o "mandas a llamar" al id que esta visible, solo lees el data que requieres.

    de un vistazo rapido vi que en donde esta activo es en:

    var element = $(e.target).find(".owl-item").eq(index).find('.element-roulette');
    var item = element.data('item');

    Asi que solo deberias leer el data-descripción. Mas info aqui
    Saludos Terrícola...

    Stryfe™
      Votes: 1 - Link answer
     
  •  
      0  
     
    Date: 28-06-2019 06:38:27 Disculpa mi gran ignorancia en jquery, pero aun viendo el api, que ya lo había hecho, no me queda claro y esa es justamente la parte que no comprendo, qué tengo que adaptar de este fragmento: var element = $(e.target).find(".owl-item").eq(index).find('.element-roulette'); para capturar ese valor que necesito?.Gracias.   Votes: 0 - Link answer
     
  • Date: 28-06-2019 07:37:13 En si ya tienes el id por decir asi guardado en el html, en donde recorres la base de datos para presentar:

    <div class="item element-roulette" data-item="<?php echo $row['id']; ?>">
    <img src="<?php echo $row['img']; ?>" alt="<?php echo $row['descripcion']; ?>">
    </div>


    Ahora aqui el cambio seria algo asi:
    <div class="item element-roulette itemganador<?php echo $row['id']; ?>" data-item="<?php echo $row['id']; ?>"  data-descripcion="<?php echo $row['descripcion']; ?>">
       <img src="<?php echo $row['img']; ?>" alt="<?php echo $row['descripcion']; ?>">
    </div>




    y en donde mandas la alerta, me imagino que esta correcto:

    alert("Elemento Ganador!!!!" + item);

    item <-- tienes el id ahi ahora solo quedaria:

    cambialo por:
    alert("Descripcion del Elemento Ganador!!!!" + $(".itemganador"+item).data('descripcion') );


    Saludos terricola...

    Stryfe™
      Votes: 1 - Link answer
     
  •  
      0  
     
    Date: 28-06-2019 13:02:54 Buenísimo amigo, justo lo que necesitaba, te lo agradezco montones!!!!!!   Votes: 0 - Link answer
     
  •  
      0  
     
    Date: 10-07-2019 12:53:54 Saludos de nuevo @Ernesto Esteves, mira necesito ayuda de nuevo, como se hace para obtener un numero aleatorio pero solo de un grupo de valores desde un arreglo por ejemplo tengo esto: var arreglo = [1,3,20] , tengo esta funcion: itemSelected = Math.floor((Math.random() * maximo) + 1);
    cómo puedo modificarla para generar un numero aleatorio pero solo con esos tres numeros,Gracias.
      Votes: 0 - Link answer
     
  • Date: 10-07-2019 13:56:04 Saludos HQM

    eso es sencillo a partir del "tamaño" del arreglo...

    Te daria el pseudocodigo pero es casi igual que el codigo... Asi que estoy de buenas....

    var items = [1,3,20]
    var item = items[Math.floor(Math.random()*items.length)];
    


    Te recomiendo que todo ello es mejor lo hagas mediante php ya que puedes hacer mas comprobaciones, en caso que lo hagas por javascript es mejor que lo hagas en funcion, y recuerda el "items" no debe estar vacio (agregale validacion en la funcion)

    Saludos Terricola.

    Stryfe™
      Votes: 1 - Link answer
     
To actively participate in the community first must authenticate, enter the system.Sign In