Question

我有以下菜单系统。当我向菜单添加更多步骤时，我需要编写一个新函数。如何编写一个显示任何步骤信息的函数？我正在考虑提取每个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

Answer 1

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();
});

并使用“属性开头”选择器可以选择多个元素。

使用类似乎更合适

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

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

FIDDLE

Answer 2

我会使用正则表达式来提取它

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

Answer 3

你可以使用任何数量的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();
});

Answer 4

没有必要继续计算。您还可以使用类并定位您单击的元素。

尝试用类替换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/

功能中来自id的访问号码

4 个答案: