如何使用变量+=

how to use variable +=

本文关键字：变量 何使用      更新时间：2023-09-26

如何在scrollTop（）函数'+=' + itemHeight + 'px'中使用变量http://codepen.io/anon/pen/mVwOwy

var itemHeight = $(item).height(); // item height
        //keyup
        if (event.which == 38) {
            $(box).stop().animate({scrollTop: '-=' + itemHeight + 'px'}, 100);
            event.preventDefault();
            console.log('-='+ itemHeight + 'px');
            // if active item is first child
            if (active.index() !== 0) {
                $(active).removeClass('active').prev().addClass('active');
                console.log('123');
            }
        }

编辑
你的代码很好，你只是做错了一件小事。你在按下键时也使用了"-="，这是你想要的相反效果。我把它改成了"+="，它把高度加到了当前值上，这就成功了。下面的代码是您需要的：）

按键

  $(box).stop().animate({
    scrollTop: '-=' + itemHeight
  }, 100);

按键

  $(box).stop().animate({
    scrollTop: '+=' + itemHeight
  }, 100);

代码段

$(document).ready(function() {
  //item
  var box = $('.sel-wrapper');
  var item = $('.sel-wrapper li');
  var active = $('.sel-wrapper li.active');
  var itemHeight = $(item).outerHeight(); // item height
  console.log(itemHeight);
  $(item).on('click', function() {
    $(item).removeClass('active');
    $(this).addClass('active');
  });
  //
  var counter = 0;
  $(document).keydown(function(event) {
    var box = $('.sel-wrapper');
    var item = $('.sel-wrapper li');
    var active = $('.sel-wrapper li.active');
    //keyup
    if (event.which == 38) {
      $(box).stop().animate({
        scrollTop: '-=' + itemHeight
      }, 100);
      event.preventDefault();
      // if active item is first child
      if (active.index() !== 0) {
        $(active).removeClass('active').prev().addClass('active');
        console.log('123');
      }
    }
    //keydown
    if (event.which == 40) {
      $(box).stop().animate({
        scrollTop: '+=' + itemHeight
      }, 100);
      event.preventDefault();
      // if active item is last child
      if (active.index() !== item.length - 1) {
        $(active).removeClass('active').next().addClass('active');
      }
    }
    counter++;
  });
});
* {
  box-sizing: border-box;
  font-family: sans-serif;
}
body {
  margin: 0;
  padding: 0;
}
.row {
  width: 100%;
}
.sel-wrapper {
  padding: 10px 0;
  overflow-y: auto;
  margin: 20px auto;
  width: 200px;
  height: 100px;
  border: 1px solid black;
}
.sel-wrapper ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sel-wrapper li {
  padding: 4px 10px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.sel-wrapper li:hover {
  background: rgba(60, 63, 65, 0.49);
}
.sel-wrapper li.active {
  background: #1a8bff;
  color: #fff;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
/*# sourceMappingURL=style.css.map */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sel-wrapper">
  <ul>
    <li class="active">123</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>

相关文章：