Question

在这里完成初学者。所以我的HTML文档中有两个这个对象的实例。

<div class="newsItem cf sb br">
            <div class="closeButton right"></div>
            <div class="titles left">
                <div class="Title"><h3>{{Title}}</h3></div>
                <div class="Subtitle"><h5>{{Subtitle}}</h5></div>
            </div>
            <br>
            <div class="imageContainer"><img src={{URI}} alt="" /></div>
            <div class="newsText"><p>{{Text}}</p></div>
            <div class="interactive">
                <div class="comment left sb br">Komentiraj</div>
                <ul class="right stcom">
                    <li><button class="star"><img src="images/icons/star.png" alt=""></button></li>
                    <li><button class="star"><img src="images/icons/star.png" alt=""></button></li>
                    <li><button class="star"><img src="images/icons/star.png" alt=""></button></li>
                    <li><button class="star"><img src="images/icons/star.png" alt=""></button></li>
                    <li><button class="star"><img src="images/icons/star.png" alt=""></button></li>
                    <li>0</li>
                    <li><img src="images/icons/speech.png" alt="bubble"/></li>
                </ul>
            </div>  
        </div>

列表中包含星级星的元素应该模仿星级评分系统。我需要制作一个jQuery函数，点亮一个被点击的星和所有以前的星星。我的对象只由类newsItem定义，没有id。我的一个朋友使用以下代码完成了它，但他使用id作为他的对象，并且必须使用不同的id复制每个对象的代码：

$("#slider").on("click", "#box1 .ButtonMore", function()
{
    var stars = $("#mainContainer #slider #box1 .star .cl .stars .ButtonMore");
    var x= stars.index($(this));

    for (var n = 0; n < stars.length; n++)
        $(stars[n]).removeClass("active");

    for (var n = 0; n <= x ; n++)
        $(stars[n]).addClass("active");
});

我试图修改此代码以仅用于类，但没有运气。我的修改：

    $("#itemContainer").on("click", ".newsItem .star", function()
{
    var s = $("#itemContainer .newsItem .star");
    var x= s.index($(this));

    for (var n = 0; n < s.length; n++)
        $(s[n]).removeClass("active");

    for (n = 0; n <= x ; n++)
        $(s[n]).addClass("active");
});

当我点亮星星时，第二个物体中的点击会点亮第一个物体中的所有星星，就像它们都在同一个列表中一样。我猜这是因为我只使用类而不是id。有没有办法在没有id的情况下做到这一点，因为我不想弄乱我的.js文件，这种知识将来真的会派上用场。这是功课，所以我需要这样做。

Answer 1

您需要在当前的newsItem中找到星形元素，所以请尝试

$("#itemContainer").on("click", ".newsItem .star", function () {
    var $stars = $(this).closest('ul').find('.star'),
        index = $stars.index(this);
    $stars.slice(index + 1).removeClass('active');
    $stars.slice(0, index + 1).addClass('active');
});

演示：Fiddle

jQuery在同一个类的对象中选择不需要的元素

1 个答案: