從功能中的ID訪問號碼

我有以下菜單系統。隨着我向菜單添加更多步驟，我需要編寫一個新功能。我如何編寫一個函數來顯示任何步驟的信息？我想提取每個id中的數字並將其傳遞給函數，但我不知道如何實現。任何幫助將是偉大的，謝謝！從功能中的ID訪問號碼

HTML：

<h3> 
    Step1 &nbsp;&nbsp;&nbsp; 
    <i id="step-info1">Info</i> 
</h3> 

<div id="step-info-cnt1" 
    style="margin-left: 13px; display: none; width: 420px;"> 
    <div> 
     <i id="step-info-close1">Close</i> 
    </div> 
    <div> 
     <ul> 
      <li>info item step 1A</li> 
      <li>info item step 1B</li> 
     </ul> 
    </div> 
</div> 

<h3> 
    Step2 &nbsp;&nbsp;&nbsp; 
    <i id="step-info2">Info</i> 
</h3> 

<div class="popup" id="step-info-cnt2" 
    style="margin-left: 13px; display: none; width: 420px;"> 
    <div> 
     <i id="step-info-close2">Close</i> 
    </div> 
    <div> 
     <ul> 
      <li>info item step 2A</li> 
      <li>info item step 2B</li> 
     </ul> 
    </div> 
</div>

的Javascript：

$('#step-info1').click(function() { 
    $('#step-info-cnt1').show(); 
}); 
$('#step-info-close1').click(function() { 
    $('#step-info-cnt1').hide(); 
}); 

$('#step-info2').click(function() { 
    $('#step-info-cnt2').show(); 
}); 
$('#step-info-close2').click(function() { 
    $('#step-info-cnt2').hide(); 
});

JSFiddle

來源

2014-01-09 Sionnach733

正如Adeneo建議，你應該使用類 –

this.id.slice(-1)獲取事件處理程序

$('[id^="step-info"]').on('click', function() { 
    var numb = this.id.slice(-1); 
    $('#step-info-cnt' + numb).show(); 
}); 

$('[id^="step-info-close"]').on('click', function() { 
    var numb = this.id.slice(-1); 
    $('#step-info-cnt' + numb).hide(); 
});

和u內的數唱「屬性開始」選擇器，您可以選擇多個元素。

使用類似乎更合適

$('.step-info').on('click', function() { 
    $(this).closest('h3').next('.popup').show(); 
}); 

$('.step-info-close').on('click', function() { 
    $(this).closest('.popup').hide(); 
});

FIDDLE

來源

2014-01-09 14:07:29 adeneo

犯規，這限制如果您使用基於0的索引，最多10個元素？如果你認爲我的答案足以得到這個數字（使用正則表達式），你可以將它納入你的答案，我會刪除我的。 –

@JosephMarikle - 你是對的，它確實只限制一個數字，所以只有0-9。至於正則表達式，我想我可能會做'/ \ d +/.exec（this.id）'，但類似乎是要走的路。 – adeneo

我會使用一個正則表達式來提取它

this.id.match(/[0-9]+$/)

來源

2014-01-09 14:13:03

你可以使用任何可用的jQuery的號碼選擇的。

例如，使用CSS類：

<div class="step-info" style="margin-left: 13px; display: none; width: 420px;"> 
    <div> 
     <i class="step-info-close">Close</i> 
    </div> 
    <div> 
     <ul> 
      <li>info item step 1A</li> 
      <li>info item step 1B</li> 
     </ul> 
    </div> 
</div> 
<!-- and so on -->

你的JavaScript會再看看這樣的：

$('.step-info').click(function() { 
    $(this).children('.step-info-close').show(); 
}); 
$('.step-info-close').click(function() { 
    $(this).parents('.step-info:first').hide(); 
});

來源

2014-01-09 14:13:26 Eric

沒有必要繼續計數。您也可以使用類並定位您點擊的元素。

嘗試用類替代ID和使用下面的代碼：

$('.step-info').click(function() { 
$(this).parent().next().toggle(); 
}); 
$('.step-info-close').click(function() { 
$(this).parent().parent().toggle(); 
//alert($(this).parent().attr("class")); 
});

看到以下小提琴

http://jsfiddle.net/SK8YN/3/

來源

2014-01-09 14:15:58 timo

從功能中的ID訪問號碼

回答

相關問題