没有jQuery

Question

我有几个div。每个div都有一个唯一的ID。

以下是div：

<div id="1"><p>Box 1</p></div>
<div id="2"><p>Box 2</p></div>
<div id="3"><p>Box 3</p></div>
<div id="4"><p>Box 4</p></div>
<div id="5"><p>Box 5</p></div>
<div id="6"><p>Box 6</p></div>
<div id="7"><p>Box 7</p></div>
<div id="8"><p>Box 8</p></div>
<div id="9"><p>Box 9</p></div>

以下是数据外观的示例。

<script>

counter = [

  {id: 1, hovers: 0},
  {id: 2, hovers: 0},
  {id: 3, hovers: 0},
  {id: 4, hovers: 0},
  {id: 5, hovers: 0},
  {id: 6, hovers: 0},
  {id: 7, hovers: 0},
  {id: 8, hovers: 0},
  {id: 9, hovers: 0}

]

</script>

我需要做的是每次特定的div被悬停时，它的值会增加1。

如何使用Javascript执行此操作？

Answer 1

您可以先使用var counter = [{id: 1, hovers: 0},{id: 2, hovers: 0},{id: 3, hovers: 0},{id: 4, hovers: 0},{id: 5, hovers: 0},{id: 6, hovers: 0},{id: 7, hovers: 0},{id: 8, hovers: 0},{id: 9, hovers: 0}] $('div').mouseover(function() { var obj = counter.find(e => e.id == $(this).attr('id')) if(obj) obj.hovers++ console.log(obj) })方法查找具有该ID的特定对象，如果找到对象，则增加其hovers属性。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1"><p>Box 1</p></div>
<div id="2"><p>Box 2</p></div>
<div id="3"><p>Box 3</p></div>
<div id="4"><p>Box 4</p></div>
<div id="5"><p>Box 5</p></div>
<div id="6"><p>Box 6</p></div>
<div id="7"><p>Box 7</p></div>
<div id="8"><p>Box 8</p></div>
<div id="9"><p>Box 9</p></div>

db.Matches.findAll({
    where: { WLID: { $ne: currentUser } },

    attributes: ['GLID']


}).then(function(data) {
    // console.log(data);
    // console.log(data);

    var GLIDsToPass = [];

    data.forEach((dataItem) => {

        GLIDsToPass.push(dataItem);

        console.log(dataItem.get({
            plain: true
        }));
    });

});

db.user.findAll({

    where: {
        id: {
            $ne: req.user.id
        }
    },
    where: {
        id: {
            $ne: "WHAT DO I PUT HERE in order to check if every value in GLIDsToPass array is not equal..."
        }
    },...

Answer 2

您可以绑定悬停侦听器并将悬停量存储在属性中，然后您不需要事先将div的总数声明为变量。

<script type="text/javascript">
    $("div").hover(function () {
        if ($(this).attr("cnt") == null) {
            $(this).attr("cnt", "0");
        }
        $(this).attr("cnt", parseInt($(this).attr("cnt")) + 1);
    });
</script>

HTML将变为<div id="4" cnt="12">

Answer 3

没有jQuery

您需要收听mouseenter事件：

var counters = [
    {id: 1, hovers: 0},
    {id: 2, hovers: 0},
    {id: 3, hovers: 0},
    {id: 4, hovers: 0},
    {id: 5, hovers: 0},
    {id: 6, hovers: 0},
    {id: 7, hovers: 0},
    {id: 8, hovers: 0},
    {id: 9, hovers: 0}
];

var container = document.getElementById('container');
var divs = container.children;
for(var i = 0; i < divs.length; i++) {
   var div = divs.item(i);
   div.addEventListener('mouseenter', function (evt) {
       var id = evt.target.id;
       var counter = findElement(counters, id);
       if (counter) {
           counter.hovers++;
           console.log(counter);
       }
   });
}

function findElement(array, id) {
   for(var i = 0; i < array.length; i++) {
       if (array[i].id == id)
          return array[i];
   }
}

<div id="container">
    <div id="1"><p>Box 1</p></div>
    <div id="2"><p>Box 2</p></div>
    <div id="3"><p>Box 3</p></div>
    <div id="4"><p>Box 4</p></div>
    <div id="5"><p>Box 5</p></div>
    <div id="6"><p>Box 6</p></div>
    <div id="7"><p>Box 7</p></div>
    <div id="8"><p>Box 8</p></div>
    <div id="9"><p>Box 9</p></div>
</div>

Answer 4

重要的是使用mouseenter事件。您可以阅读here。不要将它与鼠标悬停混淆，这在技术上对您的示例不正确，因为它还会触发子元素（在您的情况下为<p>），这会导致您的悬停计数关闭。

以下是使用JavaScript解决问题的方法：

＆＃13;

(function(){

  var counter = [
    {id: 1, hovers: 0},
    {id: 2, hovers: 0},
    {id: 3, hovers: 0},
    {id: 4, hovers: 0},
    {id: 5, hovers: 0},
    {id: 6, hovers: 0},
    {id: 7, hovers: 0},
    {id: 8, hovers: 0},
    {id: 9, hovers: 0}
  ];

  // Use a named function, not an anonymous function
  // The event {Object} parameter is passed from mouseenter
  function updateHoverCount(event){

      // Array.forEach is used here because if the order
      // of counter wasn't perfectly defined
      // (EG: id of 3, id of 1, ... id of [0-9])
      // this will find the right object first and
      // then update the hover count
      counter.forEach(function(ele, i){

          // Match the id against the event target
          if(ele.id === Number(event.target.id)){
              ele.hovers += 1;

              // Logging to show in example
              console.log('Element'
                          , event.target
                          , 'Total Hovers:'
                          , ele.hovers);
          }

      });
  }

  // Iterate over your counter to find the elements
  counter.forEach(function(ele, i){

      // Variable storage isn't necessary, it's provided for clarity
      var div = document.getElementById(String(ele.id));

      // Add the mouseenter (not mouseover) event to the div
      div.addEventListener('mouseenter', updateHoverCount);

  });
    
})();

＆＃13;

<div id="1"><p>Box 1</p></div>
<div id="2"><p>Box 2</p></div>
<div id="3"><p>Box 3</p></div>
<div id="4"><p>Box 4</p></div>
<div id="5"><p>Box 5</p></div>
<div id="6"><p>Box 6</p></div>
<div id="7"><p>Box 7</p></div>
<div id="8"><p>Box 8</p></div>
<div id="9"><p>Box 9</p></div>

＆＃13;

注意在Array原型上使用.forEach。您可能需要根据浏览器要求来填充您的网站或应用程序。您可以查看浏览器规范here。 <垫片是必需的。 IE9和更旧的移动浏览器。

Javascript div onhover增量计数

4 个答案:

没有jQuery