Question

所以，我有基本的HTML：

<div id=cover">
    <a href=""><img src="" width="" height="" alt=""></a>
</div>

<ul class="covers">
    <li><a href=""><img src="" width="" height="" alt=""></a></li>
    <li><a href=""><img src="" width="" height="" alt=""></a></li>
    <li><a href=""><img src="" width="" height="" alt=""></a></li>
    <li><a href=""><img src="" width="" height="" alt=""></a></li>
</ul>

在jQuery中，当点击#cover或.covers时，我想获得.covers中的元素总数，以及.covers中的当前点击项目（如果适用）

我能够在jQuery中使用它，但是在两个不同的功能中。我想将2组合成一个不错的高效函数。

这是我的jQuery代码：

// jQuery
$(document).ready(function() {

    $("#cover").click(function(e) {
        e.preventDefault();

        var numThumbs = $(this).next(".covers").children("li").length;
        var currentThumb = 0;

        alert(numThumbs);
        alert(currentThumb);
    });

    $("#cover + .covers li").click(function(e) {
        e.preventDefault();

        var numThumbs = $(this).parent().children("li").length;
        var currentThumb = $(this).index();

        alert(numThumbs);
        alert(currentThumb);
    });

});

Answer 1

我认为这样可行，currentThumb逻辑可能需要调整，但如果确实如此，它应该非常简单。

$("#cover, #cover + .covers li").click(function(e) {
    e.preventDefault();
    var numThumbs = $("#cover").next(".covers").children("li").length;
    var currentThumb = $(this).is("#cover") ? 0 : $(this).index() - 1;
    alert(numThumbs);
    alert(currentThumb);
});

Answer 2

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">
            $(document).ready(function() {

            $("#cover ,.covers li").click(function(e) {
                e.preventDefault();
                if($(this).parent().children("li").length)
                {
                    var numThumbs = $(this).parent().children("li").length;
                    var currentThumb = $(this).index();
                    alert(numThumbs);
                    alert(currentThumb+1);
                }
                else
                {
                    var numThumbs = $('.covers').children("li").length;
                    alert(numThumbs);
                }
            });

        });
    </script>
</head>
<body>
<div id="cover">
    <a href=""><img src="" width="" height="" alt="">hello</a>
</div>

<ul class="covers">
    <li><a href=""><img src="" width="" height="" alt="">first</a></li>
    <li><a href=""><img src="" width="" height="" alt="">second</a></li>
    <li><a href=""><img src="" width="" height="" alt="">third</a></li>
    <li><a href=""><img src="" width="" height="" alt="">fourth</a></li>
</ul>
</body>
</html>

获取总项目和当前项目

2 个答案: