Wie adressiere ich ein exaktes Element (von mehreren mit derselben Klasse) für die entsprechende Checkbox-Aktion?

Question

Ich habe ein kleines tabellenartiges Widget, das mehrere Streifen (<div class="widget_stripe">) enthält, von denen jede einen Namen (Titel) und ein Kontrollkästchen hat. Die HTML-Struktur ist wie folgt:

<div class="widget_stripe"> 
    <div class="col-sm-10 activity_name_holder"> 
     <p class="activity_name">Send the annual report to Mr. Smith</p> 
    </div> 
    <div class="col-sm-2 status_checkboxes_holder"> 
     <form action="#" class="allow_mediacontacts_form"> 
       <p> 
       <input class="t3t" type="checkbox" id="activity8" /> 
       <label class="l3l" for="activity8"></label> 
       </p> 
     </form> 
    </div> 
</div> 

Also, was ich tun möchte, ist die font-weight (700-400) des Textes innerhalb <p class="activity_name>, zu ändern, so dass ich das Hinzufügen einer Sonderklasse, wenn das Kontrollkästchen wird geprüft.

var activityName = $('p.activity_name'); 
$("input.t3t").click(function() { 
    if($(this).is(":checked")) { 
     $(activityName).addClass('checked_name'); 
    } else { 
     $(activityName).removeClass('checked_name'); 
    } 
}); 

aber wie Sie sehen können, wird es einfach Feuer von dieser Maßnahme all <p> s mit dieser Klasse, und ich nicht herauszufinden, wie diese genau <p class="activity_name> adressieren, die in den gleichen <div class="widget_stripe"> gelegen ist, dass das Kontrollkästchen. Wie kann ich dieses Verhalten erreichen?

Vielen Dank im Voraus!

Answer 1

diese und Navigation Verwenden Sie die Klasse nur auf das ausgewählte Element

if ($(this).is(":checked")) { 
    $(this).closest("div.widget_stripe").find("p.activity_name").addClass('checked_name'); 
} else { 
    $(this).closest("div.widget_stripe").find("p.activity_name").removeClass('checked_name'); 
}