不同元素上的jQuery函数

-1

所以，我有一个简单的代码，我无法让它工作。我试图在这里找到关于同一主题的答案，但对于jQuery来说，新的答案似乎太复杂了。不同元素上的jQuery函数

无论如何，我想要做的是有相同的脚本运行不同的div。在阅读这里之后，我设法安排了下面的代码，但它似乎并不奏效。

<div id="mydiv1" onclick="handleClick(this)" style="position:relative; left:0px;">Div One</div> 
<div id="mydiv1a" style="position:relative; left:0px;">Div One A</div> 

<div id="mydiv2" onclick="handleClick(this)" style="position:relative; left:0px;">Div Two</div> 
<div id="mydiv2a" style="position:relative; left:0px;">Div Two A</div> 

<script> 
$(document).ready(function(){ 

function handleClick(x) { 
$(x.id + 'a').fadeToggle("slow"); 
} 

} 
</script>

我希望这样做是当我点击＃mydiv1时，函数应该在＃mydiv1a上运行。对于＃mydiv2也是如此。预先感谢您的帮助！

来源

2014-12-27 Konstantinos

最好是分配您的脚本处理（不在在html中行）。奖励是因为您可以使用jQuery委派，即在文档正文上为正文中的许多元素分配点击处理程序。此外，样式应尽可能在css标签/ css文件中（why?）。在这种情况下，position和left都没用。该片段展示了这一切：

$('body').on('click', '#mydiv1, #mydiv2', handleClick); 
 
//^handler on body |     | 
 
//     for elements  | 
 
//          handler method 
 

 
function handleClick(e) { 
 
    $('#'+this.id+'a').fadeToggle('slow'); 
 
}

#mydiv1, #mydiv2 { 
 
    cursor: pointer; 
 
}

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

 
<div id="mydiv1">Div One</div> 
 
<div id="mydiv1a">Div One A</div> 
 

 
<div id="mydiv2">Div Two</div> 
 
<div id="mydiv2a">Div Two A</div>

来源

2014-12-27 14:37:07 KooiInc

这是最好的答案，因为它也指出了大量改进代码的方法。分离关注点很重要，男人。 – 2014-12-27 14:46:44

谢谢KooiInc！似乎现在工作得很好！是的我在服务器的不同文件中有脚本，而不是在html中内联。我只是这样写的，所以我可以给我一个简单的想法。虽然我留下了一些无用的东西。谢谢大家的帮助！ – Konstantinos 2014-12-28 15:25:18

您需要使用#这是你如何选择元素在jQuery的一个特定的ID或CSS为此事

$('#' + x.id + 'a').fadeToggle("slow");

但是你可以简化你的代码下面

$('div').filter(function(){ return /\d+$/.test(this.id) }).click(function(){ 
    $(this).next().fadeToggle("slow"); 
});

来源

2014-12-27 14:23:36

'$（ '格[ID] + DIV [ID $ =一]'）'是不相关的选择，你在'DIV [ID $ = A]' – 2014-12-27 14:37:15

@A结合的Click事件。沃尔夫我不这么想。更新谢谢。 – 2014-12-27 14:42:46

现在这是我的一个noobie错误：D谢谢！ – Konstantinos 2014-12-28 15:33:33

尝试这

$(this).next().fadeToggle("slow");

来源

2014-12-27 14:26:24 agentpx

这段代码创建一个click事件都div秒。该活动将知道点击的具体div。

$(function(){ 

    $("#mydiv1, #mydiv2").click(function(){ 
     $(this).fadeToggle("slow"); 
    }); 

});

来源

2014-12-27 14:52:07

不同元素上的jQuery函数

回答

相关问题