Question

我有一个解决上一个问题的工作解决方案，但它不像感觉一样好程序员的习惯。有没有更好的解决方案，或者这只是一条路？

这是我的HTML：

<ul>
    <li onclick="answer(this)">A</li>
    <li onclick="answer(this)">B</li>
    <li onclick="answer(this)">C</li>
    <li onclick="answer(this)">D</li>
</ul>

我的JS：

window.answer = function (elm) {

    if ($(elm).is(':nth-of-type(1)')) {

        alert('elm is 1st of type');

    } else if ($(elm).is(':nth-of-type(2)')) {

        alert('elm is 2nd of type');

    } else if ($(elm).is(':nth-of-type(3)')) {

        alert('elm is 3rd of type');

    } else if ($(elm).is(':nth-of-type(4)')) {

        alert('elm is 4th of type');

    }

};

此代码的作用是，它会警告第n个孩子（第2个<li>警告elm is 2nd of type）

简而言之，是否有更好（更合理）的方法来实现相同的结果？如果是这样，我该如何实现呢？

干杯！

Answer 1

由于您正在使用JQuery，因此您可以找到使用index函数的实用程序：

https://api.jquery.com/index/

在你的回答功能中，你可以为你想要匹配的所有li添加一个选择器（例如，如果你有多个无序列表），然后：

var zeroBasedIndex = $("your-li-selector").index(elm);

请注意，这会返回一个从零开始的位置，随时可以++找回您的位置。

希望这有帮助

Answer 2

<ul>
    <li data-type="1st" onclick="answer(this)">A</li>
    <li data-type="2nd" onclick="answer(this)">B</li>
    <li data-type="3rd" onclick="answer(this)">C</li>
    <li data-type="4th" onclick="answer(this)">D</li>
</ul>

脚本

window.answer = function (elm) {

    var type = $(elm).attr("data-type");
    var message = 'elm is ' + type + ' of type';

    alert(message);
};

如果你不能编辑html：

window.answer = function (elm) {

    var type = parseInt($(elm).index()) + 1;
    switch(type)
    {
        case 1:     
        {
            type += "st";
        }
        break;
        case 2:     
        {
            type += "nd";
        }
        break;
        case 3:     
        {
            type += "rd";
        }
        break;
        case 4:
        {
            type += "th";
        }
        break;
    }


    var message = 'elm is ' + type + ' of type';

    alert(message);
};

Answer 3

<ul id="myList">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>

$("#myList").on("click", "li", function() {
    alert( $(this).index() );
});

所以，这是事件委托（你可以在jquery docs中找到它）。这有效的做法是它将一个事件监听器附加到你的ul元素，过滤目标的方式只有在点击li类型的子项时才会引发事件，然后在myList父项中返回该子项的索引位置。

是否有更好（更明智）的方法来实现同样的目标？

3 个答案: