如何使用jquery将数据属性附加到类

Question

我正在使用bootstrap carousel，我想附加此代码

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

当我将鼠标悬停在课堂上时，

所以旋转木马滑块会在悬停时发生变化但不确定如何变化。有什么想法吗？

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

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

这里可以看到完整的代码 https://jsfiddle.net/x347swLh/

Answer 1

代码中的问题

您还有一个$标志。

$($this)
  ^

您的append来电仅向当前元素附加文字，这是不正确的，您需要添加data属性。此外，您需要关闭已打开的引文'。

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

使用jQuery中的.data()函数。

$('.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>

资源

• .data()

Answer 2

试试这个

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

如果你想删除attr

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