Note that there are some explanatory texts on larger screens.

plurals
  1. POChanging classes to another name so it doesn't activate onClick in jquery, then reset
    text
    copied!<h3>Background</h3> <p>I am trying to create a jquery function which will change all class names EXCEPT the current object in question, execute a function, and then reset all old classes back, dynamically, without refresh... Anyone know how I can acheive this?</p> <h3>HTML</h3> <pre><code>&lt;div class="view_link"&gt; &lt;a href="#" class="edit_link" data-link="edit_input_a"&gt;Edit&lt;/a&gt; &lt;span class="edit_input_a"&gt;&lt;input type='text' name='input' /&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class="view_link"&gt; &lt;a href="#" class="edit_link" data-link="edit_input_z"&gt;Edit&lt;/a&gt; &lt;span class="edit_input_z"&gt;&lt;input type='text' name='input' /&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class="view_link"&gt; &lt;a href="#" class="edit_link" data-link="edit_input_9"&gt;Edit&lt;/a&gt; &lt;span class="edit_input_9"&gt;&lt;input type='text' name='input' /&gt;&lt;/span&gt; &lt;/div&gt; </code></pre> <h3>Javascript</h3> <pre><code>$('.edit_link').click(function(e) { //set which fields to act upon var edit_field = $(this).data('link'); //Open the editable field of the corresponding item $("." + edit_field).slideDown(700,'linear'); /* now change all the other a links with class 'edit_link' to edit_link_inactive (EXCEPT THE CURRENT OBJECT BEING WORKED ON) so if the user clicks another link at the same time, it will not run through the click function */ //Run Ajax Function /* On succeed, reset all classes with 'edit_link_inactive' back to edit_link */ </code></pre> <h3> Not Working Statement That I've Tried</h3> <pre><code>$('.edit_link').not(this).attr('class', "inactive"); </code></pre> <p>Thanks!!!</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload