将元素的ID分配给.hover（）上的变量以用于单击事件

我的页面上有12个元素（但是下面我只写了3个代码）。当点击一个，其他11消失（使用称为'spinOut'的动画）。我不希望为每个单独的元素编写单击运行的代码，而是希望在悬停时将元素的id分配给$test变量，然后在点击时单击$test（元素悬停），我的代码将被执行为那个元素。因此，我只需写出一个代码块，将其应用于$test，这意味着它将应用于任何被点击的元素。将元素的ID分配给.hover（）上的变量以用于单击事件

我想为.hover（）函数中的变量$ test赋值，然后在外部使用它。我发现很多人都有类似的问题，但没有解决问题的解决方案对我有帮助。我想知道如何在.hover（）函数中分配$test变量，然后在外部使用它。

$(document).ready(function() { 
    var $test; 

    $("#M").hover(function() { 
     $test = "#M"; 
    }); 
    $("#N").hover(function() { 
     $test = "#N"; 
    }); 
    $("#O").hover(function() { 
     $test = "#O"; 
    }); 

    //When I define variable value here it works 
    $($test).click(function() { 
     $(".pageItem:not("+$test+")").addClass("spinOut"); 
    }); 
});

来源

2016-11-09 Mintblaze

变量作用域在这里不是问题。如果你考虑第二次尝试做什么 - 当你附加'click'事件时，'$ test'将被加载''''。这不会选择任何元素。 –

我试着做'var $ test'，但没有奏效。那么如何在.hover（）函数中更改$ test的值呢？ – Mintblaze

@Mintblaze值正在改变，问题是你的点击事件 –

这是我如何得到它的工作。我的页面上的所有部分“.pageItem”类的12个元素。我没有在$().click指定特定元素 - 我只是在被点击任何.pageItem运行代码，然后使用$test变量的函数内的目标已被点击的.pageItem。该代码将应用于最后一次徘徊的元素 - 无法先点击其中一个元素，而无需先点击它们。

$("#M").hover(function() { 
    $test = "#M"; 
}); 
$("#N").hover(function() { 
    $test = "#N"; 
}); 
$("#O").hover(function() { 
    $test = "#O"; 
}); 
$(.pageItem).click(function() { 
    $(".pageItem:not("+$test+")").addClass("spinOut"); 
});

但是，做什么，我需要一个更简单，更合理的方式。相反，与.pageItem我最后一次上徘徊的ID填充$test，并用它来指定我点击了什么，我给你$(this).attr("id")到$test内。点击（）函数如下：

$(.pageItem).click(function() { 
    $test = $(this).attr("id"); 
    $(".pageItem:not("+$test+")").addClass("spinOut"); 
});

来源

2016-11-09 16:24:20 Mintblaze

你不能这样做，因为当设置触发器时单击该元素不存在（因为它是空的）。一种方式做到这一点：

$(document).ready(function() { 
     var $test = ''; 
     $("#M").hover(function() { 
      $test = "#M"; 
     }); 

     $(document).on('click', $test, (function() { 
      if ($test) 
       console.log($test); 
     }); 
});

编辑：另一种方式来做到这一点：

$(document).ready(function() { 
     var $test = ''; 
     $("#M").hover(function() { 
      // for future use if needed 
      $test = "#M"; 

      $(this).unbind('click').click(function() { 
       console.log($test); 
      }); 
     }); 
});

来源

2016-11-09 14:41:24 Baumi

这有完全相同的问题 –

你也不能那样做。当'on'被调用时，'$ test'被设置为空字符串。 '$ test'变化时'on'不会被再次调用。 –

它有效，但不是我想要的方式。这样做，在第一次点击后，我可以点击页面上的任何地方，并执行功能。我需要这个函数只有当'$ test'包含的元素被点击时才被执行....如果这是有道理的 – Mintblaze

$(document).ready(function() { 
    $("#M").hover(function() { 
     $test = "#M"; 
     eventClick($test, function() { console.log($test); }); 
    }); 

    var eventClick=function(ele, f) { 
     $(ele).unbind('click'); 
     $(ele).click(f); 
    }; 

});

来源

2016-11-09 15:10:10 Cava

这听起来像你想要一个单击处理程序只重视你已经元素盘旋。有很多方法可以做到这一点。这里有一个：

$(document).ready(function() { 
 
     $('.clickable').on('mouseenter', function() { 
 
      $(this).data('can-click', true); 
 
     }).on('mouseleave', function() { 
 
      $(this).data('can-click', false); 
 
     }); 
 
     $(document).on('click', function (e) { 
 
      var currentTarget = $(e.target); 
 
      if (currentTarget.data('can-click')) { 
 
       console.log('clicked'); 
 
      } 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="M" class="clickable">M</div> 
 
<div id="O">O</div>

技术上讲，这听来对整个文件的任何点击事件，但只是反应那些正在上空盘旋。它通过将可“点击”的元素标记为可用于仅在悬停时单击来工作。当用户点击时，代码会在继续执行代码之前检查该标记。

来源

2016-11-09 15:16:18

只是假设你点击的内容的类型“按钮”的“输入”你可以做这样的事情，有可能。

$(document).ready(function() { 
    var $test = ''; 
    $("#M").hover(function() { 
     $test = "#M"; 
    }); 

    $("input[type=button]").on('click', function (e) { 
     console.log($test); 
    }); 
});

如果我的假设是不正确，那么这个可能的解决方案可能无法工作或可能需要改变。

只是一个念头

来源

2016-11-09 15:24:46

将元素的ID分配给.hover（）上的变量以用于单击事件

回答

相关问题