通过JS删除X类时添加类

时间:2017-05-31 09:49:19

标签: javascript jquery html class slide

当我用JS删除另一个类时,我试图将一个类添加到div。

这是我的HTML:

<body class="homepage">

<div id="wrap">

    <div id="projects">
      <section id="project-0" class="slide active"> Slide 1</section>
      <section id="project-1" class="slide active"> Slide 2</section>
      <section id="project-2" class="slide active"> Slide 3</section>
    </div>
</div>
<div class="content"> Website main content </div>

这是一个垂直幻灯片,因此当您向下滚动时,使用JS删除active类。我想要实现的是在body移除active后向project-2添加一个类。

这是我到目前为止所做的,但它不识别类active,因为它是通过JS添加的......

if(!$("#project-2").hasClass("active")){
    $("body").addClass("shifted");
 }

JS:

var delta = 0;
var currentSlideIndex = 0;
var scrollThreshold = 30;
var slides = $(".slide");
var numSlides = slides.length;
function elementScroll (e) {
  console.log (Math.abs(delta));
  // --- Scrolling up ---
  if (e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0) { 

    delta--;

    if ( Math.abs(delta) >= scrollThreshold) {
    prevSlide();
    }
  }

  // --- Scrolling down ---
  else {

    delta++;

    if (delta >= scrollThreshold) {
      nextSlide();
    }
  }

  // Prevent page from scrolling
  return false;
}


function showSlide() {

  // reset
  delta = 0;

  slides.each(function(i, slide) {
    $(slide).toggleClass('active', (i >= currentSlideIndex));
  });

}


function prevSlide() {

  currentSlideIndex--;

  if (currentSlideIndex < 0) {
    currentSlideIndex = 0;
  }

  showSlide();
}

function nextSlide() {

  currentSlideIndex++;

  if (currentSlideIndex > numSlides) { 
    currentSlideIndex = numSlides;
  }

  showSlide();
}

$(window).on({
  'DOMMouseScroll mousewheel': elementScroll
});

You can see here how it works 感谢

2 个答案:

答案 0 :(得分:1)

通过查看您的JS代码,我相信您希望在向下滚动时将 $data = json_decode(file_get_contents("php://input")); $connect = mysqli_connect("localhost", "root", "", "embroidery"); if (count($data) > 0) { $username = mysqli_real_escape_string($connect, $data->serviceData->username); $password = mysqli_real_escape_string($connect, $data->serviceData->password); $query = 'SELECT * FROM `client` WHERE username = "' . $username . '" AND password= "' . $password . '"'; $q = mysqli_query($connect, $query); if (mysqli_num_rows($q) > 0) { $_SESSION["logged_in"] = true; $_SESSION["name"] = $username; echo $_SESSION["name"]; } else { echo 'The username or password are incorrect!'; } } ?> 添加到<div class="list list-inset" ng-controller="loginCtrl"> <label class="item item-input"> <input type="text" placeholder="Username" required="" ng-model="username"> </label> <label class="item item-input"> <input type="password" placeholder="Password" ng-model="password"> </label> <button class="button button-block button-positive" name="submit" ng-click="submit()">Login</button> </div> 。您可以尝试以下代码:

class

答案 1 :(得分:0)

您的课程缺席检查仅开始一次。您必须以100毫秒或任何您想要的间隔执行此操作:

setInterval(function()
{
    if (!$("#project-2").hasClass("active")){
        $("body").addClass("shifted");
    }
}, 100);