Question

我目前有这个功能：

function highlightBoxes() {
  var windowStart = $(window).scrollTop();
  var windowEnd = windowStart + $(window).height();

  $('.box').each(function() {
    var box = $(this);
    var start = box.offset().top;
    var end = start + box.height();

    if (windowStart <= start && windowEnd >= end) {
      box.addClass('active');
    } else {
      box.removeClass('active');
    }
  });
}

highlightBoxes();
$(document).scroll(highlightBoxes);
$(window).resize(highlightBoxes);

检查整个元素（在这种情况下为.box）是否在视图中（jsfiddle）。但是，我希望能够将该函数用作on事件，因此我可以将它用于许多不同的元素。类似的东西：

$('.box').on('inview', function () {
    if (elementIsInView) {
        // make the box red
    } else {
        // make the box the original color
    }
});

我该怎么做？

Answer 1

使用on意味着您需要触发一个具有相同名称的事件，其超简单版本使用document作为消息总线，如：

$(document).trigger('inview');

因此，在代码中您确定inview应为true的位置，触发上述事件，此时on事件将运行该函数。

基于上面的代码，您可能希望将if语句移出on事件，实际上将其作为单独的函数运行。当elementIsInView返回true时，您可以触发inview事件。

Answer 2

您可以使用悬停事件。

$(document).on('hover','.box', function () {
if (elementIsInView) {
    // make the box red
} else {
    // make the box the original color
}
});

如果我的回答不清楚请告诉我。

Answer 3

点击，悬停，拖动所有活动。事件是一个动作，从用户申请。函数是一个javascript声明。它没有直接运行。它只在事件触发后运行。事件由w3c声明

我认为你需要这样的东西：

通过按钮点击来分配功能。它可以通过按钮点击事件进行。

＆＃13;

$('button').on('click',hello)

function hello(){
  console.log('button Clicked')
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button >hi</button>

＆＃13;

或

$('button').on('click',function hello(){ console.log('button Clicked') })

您的代码确实如此

$('.box').on('click', function inview() { if (elementIsInView) { // make the box red } else { // make the box the original color } });

Answer 4

试试这个：

+--------+---------+------------------------------------+
|   Id   |  Name   |              DataID                |   
+--------+---------+------------------------------------+
|   1    |   xyz   |       111,222,333,444              |
|   2    |   xxz   |       555,666,777                  |
|   3    |   xyx   |       888,999,000,001              |
|   4    |   yyz   |       010,011,100,200              |
|   5    |   xyy   |       600,500,400,300,555          |
|   6    |   yyy   |       111,700,800,900              |
|   7    |   zyz   |       050,0150,025,550,950,888     |
|   8    |   xzz   |       800,786                      |
|
|
|
|  1123  |   aaa   |       111,444,666,888              |
|  1124  |   bbb   |       889,998,777                  |
+--------+---------+------------------------------------+

使用功能作为＆＃34; on＆＃34;事件？

4 个答案: