Ayuda en la programación, respuestas a preguntas / Javascript / Cómo agregar un atributo de datos a la clase usando jquery - javascript, jquery, css, twitter-bootstrap

Cómo agregar atributos de datos a la clase usando jquery - javascript, jquery, css, twitter-bootstrap

Estoy usando el carrusel de bootstrap y quiero agregar este código

data-target="#carousel" data-slide-to="0"

en una clase cuando paso el mouse sobre ella para que el control deslizante del carrusel cambie al pasar el mouse pero no estoy seguro de cómo. ¿Alguna idea?

$(".green").hover(function(){

$($this).append("data-target="#carousel" data-slide-to="0"");
});

el código completo se puede ver aquí https://jsfiddle.net/x347swLh/

Respuestas

0 para la respuesta № 1

Prueba esto

$(".green").attr("data-target","#carousel");
$(".green").attr("data-slide-to","0");

y si quieres eliminar attr

$(".green").removeAttr("data-target");

0 para la respuesta № 2

Tienes un adicional $ firmar.

$($this)
^

Tu append la llamada solo agrega un texto al elemento actual, que no es correcto, debe agregar data atributos. Además, debe cerrar su presupuesto abierto ".

$($this).append("data-target="#carousel" data-slide-to="0"");
^       ^                     ^ ^

Usa la función .data() de jQuery.

$(".green").hover(function(){
$(this).data("target", "#carousel").data("slide-to", "0");
});

$(document).ready(function() {
$(".carousel").carousel({
interval: 0
});

$(".green").hover(function() {
$(".green").data("target", "#carousel");
$(".green").data("slide-to", "0");
console.log($(".green").data("target"));
});

$(".blue").hover(function() {
$(".blue").data("target", "#carousel");
$(".blue").data("slide-to", "1");
console.log($(".blue").data("target"));
});
});

.carousel-fade .carousel-inner .item {
-webkit-transition-property: opacity;
transition-property: opacity;
}

.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
opacity: 0;
}

.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}

.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

.carousel-fade .carousel-control {
z-index: 2;
}

html,
body,
.carousel,
.carousel-inner,
.carousel-inner .item {
height: 100%;
}

.item:nth-child(1) {
background: #74C390;
}

.item:nth-child(2) {
background: #51BCE8;
}

.item:nth-child(3) {
background: #E46653;
}

.green,
.blue,
.red {
border: 1px solid #333;
float: left;
cursor: pointer;
width: 300px;
}

/*Don"t use in your project!!!!*/
.as-console-wrapper {
max-height: 100% !important
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#carousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#carousel" data-slide="next">&rsaquo;</a>
</div>
<div class="green">Green</div>
<div class="blue">Blue</div>
<div class="red">Red</div>