javascript – 使用带有jQuery scrollTo的箭头键

我已经成功实现了scrollTo jQuery插件,当单击一个链接时,该插件会滚动到下一个div,类为“new”.但是,我还希望能够使用箭头键向上和向下滚动到同一个类的下一个/上一个div.

我已经浏览了整个互联网,但一直无法找到如何做到这一点.我是JS的新手,所以非常简单的说明将不胜感激！

这是相关代码：

<script type="text/javascript">
jQuery(function($){

 $('<div id="next_arrow"></div>') 
  .prependTo("body") //append the Next arrow div to the bottom of the document
  .click(function(){ 
   scrollTop = $(window).scrollTop();
   $('.new').each(function(i, h2){ // loop through article headings
    h2top = $(h2).offset().top; // get article heading top
    if (scrollTop < h2top) { // compare if document is below heading
     $.scrollTo(h2, 800); // scroll to in .8 of a second
     return false; // exit function
    }
   });
  });

});
</script>

为了使箭头键有效,我需要添加什么？

谢谢,
摊晒

解决方法:

您可以使用keydown事件侦听器来侦听按键.你可以在& lt; input& gt;上使用它.田地等.因为keydown事件bubble在DOM上,你可以在文档对象上使用它来捕获页面上的任何按键：

$(function () {
  $(document).keydown(function (evt) {
    alert("Key pressed: " + evt.keyCode);
  });
});

每个按键都有一个代码.如果您在网页中使用上面的代码,您将看到向下箭头的键代码是40.您可以使用处理程序中的if或switch语句来解决此问题：

jQuery(function () {

  $(document).keydown(function (evt) {
    if (evt.keyCode == 40) { // down arrow
      alert("You pressed down.");
    }
  });

});

现在,您需要绑定实际跳转到下一个标题的代码.我建议将代码抽象为函数,以便将其用于按键和单击.这是函数,以及使用它的原始代码的变体：

// Here is the function:

function scrollToNew () {
  scrollTop = $(window).scrollTop();
  $('.new').each(function(i, h2){ // loop through article headings
    h2top = $(h2).offset().top; // get article heading top
    if (scrollTop < h2top) { // compare if document is below heading
      $.scrollTo(h2, 800); // scroll to in .8 of a second
      return false; // exit function
    }
  });
}

// Here is your original code, modified to use the function:

jQuery(function () {

  $("#next").click(scrollToNew);

});

最后,您可以添加按键代码并从那里调用函数：

function scrollToNew () {
  scrollTop = $(window).scrollTop();
  $('.new').each(function(i, h2){ // loop through article headings
    h2top = $(h2).offset().top; // get article heading top
    if (scrollTop < h2top) { // compare if document is below heading
      $.scrollTo(h2, 800); // scroll to in .8 of a second
      return false; // exit function
    }
  });
}

jQuery(function () {

  $("#next").click(scrollToNew);

  $(document).keydown(function (evt) {
    if (evt.keyCode == 40) { // down arrow
      evt.preventDefault(); // prevents the usual scrolling behavIoUr
      scrollToNew(); // scroll to the next new heading instead
    }
  });

});

更新：要向上滚动,请执行两项操作.将keydown处理程序更改为：

  $(document).keydown(function (evt) {
    if (evt.keyCode == 40) { // down arrow
      evt.preventDefault(); // prevents the usual scrolling behavIoUr
      scrollToNew(); // scroll to the next new heading instead
    } else if (evt.keyCode == 38) { // up arrow
      evt.preventDefault();
      scrollToLast();
    }
  }

并编写一个基于scrollToNew()的scrollToLast()函数,它找到页面上没有的最后一个新标题：

function scrollToLast () {
  scrollTop = $(window).scrollTop();

  var scrollToThis = null;

  // Find the last element with class 'new' that isn't on-screen:
  $('.new').each(function(i, h2) {
    h2top = $(h2).offset().top;
    if (scrollTop > h2top) {
      // This one's not on-screen - make a note and keep going:
      scrollToThis = h2;
    } else {
      // This one's on-screen - the last one is the one we want:
      return false;
    }
  });

  // If we found an element in the loop above, scroll to it:
  if(scrollToThis != null) {
    $.scrollTo(scrollToThis, 800);
  }
}

javascript – 使用带有jQuery的Page Url

我在这里浏览了一些其他问题,用jQuery和/或普通的javascript获取当前的页面网址,但我一直没有运气.

我的目标是：根据用户所在的页面,我想在该菜单项下面有一个边框.
这就是我试图这样做的方式：

var urlHome = 'http://example.com/'
var urlShop = 'http://example.com/shop/'
var urlTeam = 'http://example.com/team/'

if (document.URL.is(urlHome)) {
    $('#home-link').css('border-bottom', '1px solid #000');
}
else if (document.URL.is(urlShop)) {
    $('#shop-link').css('border-bottom', '1px solid #000');
}
else if (document.URL.is(urlTeam)) {
    $('#team-link').css('border-bottom', '1px solid #000');
};

不幸的是,此代码对我不起作用,我对所有建议持开放态度,并提前感谢您的帮助.

解决方法:

做就是了

if(document.URL == urlHome)
{
// Whatever
}

javascript – 使用带有OR 的IF语句的更好方法

参见英文答案 > Shorthand for multiple OR expressions in if statement                                    3个
>            checking a variable value using an OR operator                                    3个
我有这个if语句,我想知道是否存在更好的写作方式

if(i == "502" || i == "562" || i == "584" || i == "482" || i == "392"){
   //Some Stuff here
}

解决方法:

这很好.你也可以使用Array.indexOf

if(['502', '562', '584', '482', '392'].indexOf(i) !== -1)
{
    /*Do Stuff*/
}

但是,您应该小心使用Array.indexOf,因为IE9之前的Internet Explorer版本不支持它:(.这就是为什么$.inArray通常建议使用Array.indexOf.

javascript – 使用带有redux-form的antd

import { Form,Input } from 'antd';
import { Field,reduxForm } from 'redux-form/immutable';
const FormItem = Form.Item;

.....

<FormItem>
  <Field
     component={Input}
     placeholder="First Name"
     name="name"
  />
</FormItem>

const NewInput = ({
        label,labelCol,wrapperCol,help,extra,validateStatus,hasFeedback = true,colon,...rest
}) => {
  return (<FormItem
    label={label}
    wrapperCol={wrapperCol}
    labelCol={labelCol}
    help={help}
    hasFeedback={hasFeedback}
    extra={extra}
    validateStatus={validateStatus}
    colon={colon}
  >
    <Input {...rest.input} />
  </FormItem>);
};

关于在 JavaScript 中正确使用带有 Soup 的 SSL 证书和javascript soap的问题我们已经讲解完毕，感谢您的阅读，如果还想了解更多关于javascript – 使用带有jQuery scrollTo的箭头键、javascript – 使用带有jQuery的Page Url、javascript – 使用带有OR 的IF语句的更好方法、javascript – 使用带有redux-form的antd等相关内容，可以在本站寻找。