Question

情况：您可以将div设置为更大或更小，具体取决于您是在1周内加减。

CSS

.w1{width: 32px;}
.w2{width: 64px;}
.w3{width: 96px;}
.etc...

HTML

<div class="js-main-item">
    <span class="js-week" data-week="-1">-1 week</span>
    <span class="js-week" data-week="1" >+1 week</span>
    <div class="js-week-activity w1">Activity</div>
</div>

jQuery

$(document).on('click','.j-week',function(e){   
    //Get the number (+ or -1)
    var number =$(this).attr('data-week');
    //Select the class wX
    //Get the X and add the number to it
});

如何使jQuery工作？

我必须处理这两个条件。

有时类是w2或w3，具体取决于div的方式由PHP呈现
32px的宽度也是灵活的。用户可以选择3种尺寸。有时W1代表100像素。有时候代表200像素； CSS由PHP呈现。

Answer 1

您可以使用CSS变量使思考更轻松：

vector<int> g2[10000];
for(int u=0;u<N;u++) //N is the number of vertices
{ 
      for(vector<int>::iterator it=v[u].begin();it!=v[u].end();it++) 
      {
         g2[u].push_back(*it);
      }
}

var current = 1;

$(document).on('click', '.js-week', function(e) {

  var number = parseInt($(this).attr('data-week'));
  current += number;
    $('.w').css('--i', current);
})

.w {
  width: calc(var(--i, 1px) * 32);
  border: 1px solid red;
}

Answer 2

尝试一下：

$(document).ready(function(){

  $('.js-week').click(function(){

    var w = ($(this).attr("data-week") === '-1') ? -32 : +32;

    var curWidth = $('.w1').width();

    //If you want maximum 96px
    //w = ((curWidth + w) > 96 ) ? 0 : w;

    $('.w1').width(curWidth + w);

  })

})

.w1 {width: 32px;border: 2px solid orange; transition: all 500ms linear; margin-top: 10px;}

.j-week {cursor: pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="js-main-item">

  <a class="js-week" data-week="-1" href="#">-1 week</a> / 

  <a class="js-week" data-week="1" href="#">+1 week</a>

  <div class="js-week-activity w1">Activity</div>

</div>

如何将W1类更改为W2

2 个答案: