2017-03-09 43 views
0

基本上,我想要一個函數根據點擊哪個單獨操作多個元素。JS/jQuery - 我如何從一個元素ID的數字,並將其用作函數中的變量?

我有這些功能是做同樣的事情3:

$("#morelink1, #pic1").click(function() { 
var imgHeight = $(".pic").height(); 
var image = $('#more1').parent('.content').siblings(
    '.image'); 
if ($('#more1').is(":visible")) { 
    $("#more1").slideUp(200, "linear"); 
    image.height(contHeight); 
    showtext1(); 
    $("#closemore1").hide(); 
} else { 
    $("#more1").slideDown(200, "linear"); 
    image.height(imgHeight); 
    hidebutton1(); 
    hidetext1(); 
} 
}); 

正如你所看到的,我用這個功能全部結束在「1」工作的ID名稱我爲2和3複製了此功能。

不必複製,必須有一種方法可以從#morelink1中提取數字,將其設置爲變量,然後將該數字附加到函數中的ID。

我想有這樣的:

var NUMBER = [get the number from the ID of the element that was clicked]; 

$("#morelink + NUMBER, #pic + NUMBER").click(function() { 

我也有內置該功能的功能 - showtext1()hidebutton1()hidetext1()。這些也是重複的,只是改變了數字。我希望能夠對這個函數中的人做同樣的事情。會不會像showtext(NUMBER)

我環顧四周,似乎無法想出辦法做到這一點。

是否有其他方法可以做到這一點,比如將數字傳遞給函數?

回答

2

相反,只需修改您選擇使用the "starts with" operator,而不是完全指定id

$("[id^='morelink'], [id^='pic']").click(function() { 

這將每一個地方的id值與'morelink''pic'開始元素,搭配無論什麼id其餘是。

如果在點擊處理程序中仍然需要該值,則可以從當前元素的id中解析該值。

var idString = $(this).attr('id'); 
// use whatever logic you define to parse the number value. 
// for example, maybe a regular expression which matches only numeric characters? 
+0

感謝您的回覆。這看起來像我所需要的。我確實需要價值,因爲這些就像「多讀」鏈接,所以我不希望所有的項目都擴大。我使用'$('。more')。'(function()'。類似於我想要做的事情,我會碰到一個類似於我想要做的事情的代碼文件: – AdamDallas

+0

@AdamDallas:如果點擊處理程序中的任何給定操作的目標都可以在DOM中相對於點擊元素進行標識,您可能根本不需要解析該值。通常像'$(this).closest('some common parent element')這樣的東西。發現('目標元素')'會做的伎倆。這取決於你,這將更容易維護。 – David

+0

@AdamDallas:究竟是一個更好的方法?您通常不希望在循環中創建*點擊處理程序。你可以使用類來識別你的元素,這很好。但不要用循環來考慮這一點。只需使用選擇器來識別您可點擊的元素,然後使用單擊處理程序來響應該事件。 – David

0

如果你能分享你的整個代碼,這將有所幫助。從我的理解,應該是沿着這些路線的東西:

// Append click event to elements whose id starts with morelink or pic. 
$('[id^="morelink"], id^=["pic"]').click(function() { 
    // Get id of current clicked element. 
    var id = $(this).attr('id'); 
    // Use RegExp to extract number. 
    var number = id.match(/[\d]+/)[0]; 

    // Your functions starting. 
    var imgHeight = $(".pic").height(); //should this be pic + NUMBER? 
    var image = $('#more' + number).parent('.content').siblings('.image'); 

    if ($('#more' + number).is(":visible")) { 
    $('#more' + number).slideUp(200, "linear"); 
    image.height(contHeight); 
    // Executes selectMore1(); if number = 1 
    window['showtext' + number](); 
    $("#closemore" + number).hide(); 
    } else { 
    $("#more" + number).slideDown(200, "linear"); 
    image.height(imgHeight); 
    // Executes hidebutton1(); if number = 1 
    window['hidebutton' + number](); 
    // Executes hidetext1(); if number = 1 
    window['hidetext' + number](); 
    } 
}); 

不過,我不認爲hidebutton1()應該存在,但hidebutton(數量)。這就是爲什麼我要求整個代碼通過創建多個函數來真正理解你的意思。

0

如果您知道變量名稱的前綴,則後綴中包含您想要的數字。然後插入jQuery選擇器。我之前做過,如果直接插入像$(YourNewVariableForID)不會工作,然後嘗試$("#" + eval(YourNewVariableForID))

相關問題