Question

我试图基于click事件更新类名，我将值存储在变量中，该变量在控制台日志中显示正确的值，但在html中显示[object Object]。

这是我的html和jquery

jQuery(document).ready(function() {
  addclass = function() {
    var mydata = jQuery('.testimonial-section .slick-track > .ult-item-wrap.slick-current.slick-active').attr('data-slick-index');
    console.log(mydata);
  }
  jQuery(".slick-dots li").click(function(mydata) {
    addclass();
    jQuery('.slick-track').addClass('index-' + mydata);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div>
    <div class="slick-track">
      <div class="ult-item-wrap slick-slide" data-animation="animated no-animation" data-slick-index="0">
        <div class="aio-icon-component">...</div>
      </div>
      <div class="ult-item-wrap slick-slide slick-current slick-active" data-animation="animated no-animation" data-slick-index="1">
        <div class="aio-icon-component">...</div>
      </div>
      <div class="ult-item-wrap slick-slide" data-animation="animated no-animation" data-slick-index="3">
        <div class="aio-icon-component">...</div>
      </div>
    </div>
  </div>
  <ul class="slick-dots">
    <li class=""><i type="button" style="color:#333333;" class="ultsl-record" data-role="none"></i></li>
    <li class="slick-active"><i type="button" style="color:#333333;" class="ultsl-record" data-role="none"></i></li>
    <li class=""><i type="button" style="color:#333333;" class="ultsl-record" data-role="none"></i></li>
  </ul>
</div>

我在这里做错什么，任何建议都会很有帮助。如果轮播自动将“ slick-active”类移至下一个div，是否还有一种方法可以运行“ addclass”功能？

Answer 1

mydata中的

addclass()与mydata处理函数中的click不同。每个函数都有自己的局部变量范围。

在点击处理程序中，mydata包含jQuery传递给处理程序功能的Event对象。调用addclass()对此没有影响。

addclass应该返回它检索到的值，然后可以将其分配给处理程序中的变量。

jQuery(document).ready(function() {
  addclass = function() {
    var mydata = jQuery('.testimonial-section .slick-track > .ult-item-wrap.slick-current.slick-active').attr('data-slick-index');
    console.log(mydata);
    return mydata;
  }
  jQuery(".slick-dots li").click(function() {
    var mydata = addclass();
    jQuery('.slick-track').addClass('index-' + mydata);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div>
    <div class="slick-track">
      <div class="ult-item-wrap slick-slide" data-animation="animated no-animation" data-slick-index="0">
        <div class="aio-icon-component">...</div>
      </div>
      <div class="ult-item-wrap slick-slide slick-current slick-active" data-animation="animated no-animation" data-slick-index="1">
        <div class="aio-icon-component">...</div>
      </div>
      <div class="ult-item-wrap slick-slide" data-animation="animated no-animation" data-slick-index="3">
        <div class="aio-icon-component">...</div>
      </div>
    </div>
  </div>
  <ul class="slick-dots">
    <li class=""><i type="button" style="color:#333333;" class="ultsl-record" data-role="none"></i></li>
    <li class="slick-active"><i type="button" style="color:#333333;" class="ultsl-record" data-role="none"></i></li>
    <li class=""><i type="button" style="color:#333333;" class="ultsl-record" data-role="none"></i></li>
  </ul>
</div>

jQuery变量以html显示[object Object]，但在console.log

1 个答案: