运行jQuery函数onclick
所以我实现了一些jQuery，它基本上通过一个由标签激活的滑块来切换内容。 现在考虑它而不是拥有链接的DIV是它自己的链接。
我正在使用的jQuery坐在我的脑海中看起来像这样：
function slideonlyone(thechosenone) { $('.systems_detail').each(function(index) { if ($(this).attr("id") == thechosenone) { $(this).slideDown(200); } else { $(this).slideUp(600); } }); }
我使用它作为索引类型框，因此当你点击曾经是图像的标签时有几个产品*它会在它下面呈现一些描述产品细节的内容：
产品细节包含在这个div中。
因此，当您单击以前是图像*时，它将运行slideonlyone（’div_id_name’）函数。 然后上面的函数首先关闭所有其他具有类名称’system details’的div，然后使用传递给slideonlyone函数的id打开/滑动div。 通过这种方式，您可以切换产品详细信息，而不是一次性显示它们。
注意：我有一个想法只是将整个div包装在标签中，但这是一个好习惯吗？
所以现在我想知道的是，因为你需要JavaScript在div标签上运行，你如何编写它以便它仍然运行我的slideonlyone函数？
使用像示例一样使用突出的JavaScript （即内联代码），可以使用onclick属性将click事件处理程序附加到div元素，如下所示：
...
但是 ， 最佳实践是不显眼的JavaScript ，您可以使用jQuery的on()方法或其简写的click()轻松实现。 例如：
$(document).ready( function() { $('.some-class').on('click', slideonlyone('sms_box')); // OR // $('.some-class').click(slideonlyone('sms_box')); });
在处理函数内部（例如，在这种情况下为slideonlyone() ），您可以使用$(this)对象引用触发事件的元素（例如，在本例中为div $(this) 。 例如，如果您需要其ID，可以使用$(this).attr('id')访问它。
编辑
在阅读下面对@fmsf的评论后，我发现你还需要动态引用要切换的目标元素。 正如@fmsf建议的那样，您可以使用如下数据属性将此信息添加到div ：
...
要访问元素的data-attribute，可以使用@ fmsf示例中的attr()方法，但最佳做法是使用jQuery的data()方法，如下所示：
function slideonlyone() { var trigger_id = $(this).attr('id'); // This would be 'some-id' in our example var target_id = $(this).data('target'); // This would be 'sms_box' ... }
注意如何使用data('target')访问data('target') ，而不使用data-前缀。 使用数据属性，您可以将各种信息附加到元素，jQuery会自动将它们添加到元素的数据对象中 。
为什么需要将它附加到HTML？ 只需用hover绑定该function即可
$("div.system_box").hover(function(){ mousin }, function() { mouseout });
如果你坚持在html中包含JS引用，这通常是个坏主意你可以使用：
onmouseover="yourJavaScriptCode()"
主题编辑后：
…
$("div.system_box").click(function(){ slideonlyone($(this).attr("data-target")); });
您可以绑定mouseenter和mouseleave事件，jQuery将模拟它们不是本机的。
$("div.system_box").on('mouseenter', function(){ //enter }) .on('mouseleave', function(){ //leave });
小提琴
注意：不要使用hover，因为不推荐使用