jQuery在同類對象中選擇不需要的元素

完整的初學者在這裏。所以我在我的HTML文檔中有這個對象的兩個實例。jQuery在同類對象中選擇不需要的元素

<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：

$("#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。有沒有辦法做到這一點沒有身份證，因爲我不想混亂我的.js文件，這些知識將真正派上用場。這是功課，所以我需要這樣做。

來源

2013-12-14 user3102775

你可以總結出你需要什麼？我只是讀了你的文章兩次，但不能理解任何東西。 –

你需要找到當前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

來源

2013-12-14 18:26:17

jQuery在同類對象中選擇不需要的元素

回答

相關問題