不同元素上的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函數

回答

相關問題