Найти класс внутри группы ID

Question

Я начинаю работу над системой рейтингов и обнаружил в моих знаниях jquery зияющую дыру. Мой код до сих пор:

<script> 

$(document).ready(function() { 
    $("#rate").delegate("div","click", function() { 
     var targetid = $(this).attr("id"); 
     var voteval = $('#' + targetid + ' span').html(); 
     if(isNaN(voteval)) { var voteval = 0; } 
     voteval++; 
     $('#' + targetid + ' span').text(voteval); 
    }); 

}); 
</script> 

успешно находит идентификатор DIV внутри группы #rate и манипулирует данными в пределах соответствующего диапазона.

Моя проблема заключается в том, что я хочу, чтобы найти div внутри группы, содержащей определенный класс. На простом английском языке, когда пользователь нажимает, он будет искать «.active» и удалять его, если он существует, а затем вставить .активный в текущую цель (это).

Answer 1

Вы можете просто сделать это в случае щелчка:

$('.active').removeClass('active'); 
$(this).addClass('active'); 

Если активный EXIST класс, она будет удалена.

Если у вас есть несколько #rate, то вам нужно найти ближайший (и он должен быть класс вместо идентификатора) так:

var $parent = $(this).closest('#rate'); 
$parent.find('.active').removeClass('active'); 
$(this).addClass('active'); 

Answer 2

Вы можете удалить активный класс от других, и добавить к текущей div как это

$("#rate div").removeClass('active'); 
$(this).addClass('active'); 

Answer 3

Я думаю, вы хотите что-то подобное

$(document).ready(function() { 

    $("#rate").on("click", "div", function() { 
     // get text of span and make it int, also init to 0 if it's not a number 
     var thisTextToInt = parseInt($(this).children("span").text()) || -1;  
     // increment the text and set it to the span 
     $(this).children("span").text(thisTextToInt+1);  

     $('#rate .active').removeClass('active'); // remove previous active 
     $(this).addClass('active');     // make this active 
    }); 

}); 

Хотя, я должен сказать, что это не очень хороший способ установить текст для ваших элементов. Лучше держите данные в другом месте и привяжите их к элементам представления, чтобы они обновлялись автоматически.