Question

I have the following code

$('#check-twitter').click(
    function() {                                                                        
        if ($('#ShareTwitterPublish').val() == '0') {                                                               
            $('#ShareTwitterPublish').val('1');                                                                       
            $(this).removeClass('red');                                                                               
            $(this).addClass('green');                                                                                
        } 
        else {                                                                                                    
            $('#ShareTwitterPublish').val('0');                                                                       
            $(this).removeClass('green');                                                                             
            $(this).addClass('red');                                                                                  
        }                                                                                                           
    }
); 

HTML:

<div tabindex="-1" class="simplemodal-wrap" style="height: 100%; outline-width: 0px; outline-style: initial; outline-color: initial; width: 100%; overflow-x: visible; overflow-y: visible; "><div class="share-dialog simplemodal-data" style="" id="simplemodal-data">
  <div class="share-message" style="margin-bottom:30px;">
    <span>Sharing: <a style="text-decoration:none"></a></span>
    <!--<a id="copy-button" class="button medium blue" href="#">Copy URL</a>-->
  </div>
  <div id="vertical-tabs">
    <ul class="tabs">
              <a id="check-facebook" class="button tiny green span-1 last"> 
          <span></span>
        </a>
        <li class="active"><a href="#tab1">Facebook</a></li>

        <a id="check-twitter" class="button tiny green span-1 last"> 
          <span></span>
        </a>
        <li><a href="#tab2">Twitter</a></li>
        <a id="check-twitter-dm" class="button tiny red span-1 last"> 
          <span></span>
        </a>
        <li><a href="#tab3">Twitter DM</a></li>
            <a id="check-email" class="button tiny red span-1 last"> 
        <span></span>
      </a>
      <li><a href="#tab4">Email</a></li>
    </ul>
    <form style="float:right" id="VoicenoteShareForm" method="post" action="/fonykweb/voicenotes/share" accept-charset="utf-8"><div style="display:none;"><input type="hidden" name="_method" value="POST"></div>    <input type="hidden" name="data[Share][vnid]" value="c764a5e0e9e026b8e79679e8de275def1bd3ad382d0a7e45639687400c95f486" id="ShareVnid"><input type="hidden" name="data[Share][fonykid]" value="abea0cd1eec985ebb812720a798e730d8ab287393d6327716bbf697bfcd2d4de" id="ShareFonykid"><input type="hidden" name="data[Share][voicenote_url]" value="http://localhost/fonykweb/voicenotes/view/228" id="ShareVoicenoteUrl">
        <div id="tab1" class="tab_content span-8" style="display: block; ">
      <input type="hidden" name="data[Share][facebook_publish]" value="1" id="ShareFacebookPublish"><div class="span-8"><label for="ShareFacebookMessage">Message</label><textarea name="data[Share][facebook_message]" class="input-text" cols="30" rows="6" id="ShareFacebookMessage"></textarea></div>    </div>

        <div id="tab2" class="tab_content span-8" style="display: none; ">
      <input type="hidden" name="data[Share][twitter_publish]" value="1" id="ShareTwitterPublish"><input type="hidden" name="data[Share][twitter_dm]" value="0" id="ShareTwitterDm"><div class="span-8"><label for="ShareTwitterMessage">Message</label><textarea name="data[Share][twitter_message]" class="input-text" cols="30" rows="6" id="ShareTwitterMessage"></textarea></div>    </div>
    <div id="tab3" class="tab_content span-8" style="display: none; ">
      <div class="span-8"><label for="ShareDmRecipients">Recipients</label><input name="data[Share][dm_recipients]" type="text" class="input-text long" id="ShareDmRecipients" style="display: none; "><div class="tagify-container" style="width: 317px; "><input type="text" placeholder="Tag friends" maxlength="15" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"></div></div><div class="span-8"><label for="ShareDmMessage">Message</label><textarea name="data[Share][dm_message]" class="input-text" cols="30" rows="6" id="ShareDmMessage"></textarea></div>    </div>

    <div id="tab4" class="tab_content span-8" style="display: none; ">
      <input type="hidden" name="data[Share][email_publish]" value="0" id="ShareEmailPublish"><div class="span-8"><label for="ShareEmailContacts">Contacts</label><input name="data[Share][email_contacts]" type="text" class="input-text long" id="ShareEmailContacts"></div><div class="span-8"><label for="ShareEmailMessage">Message</label><textarea name="data[Share][email_message]" class="input-text" cols="30" rows="6" id="ShareEmailMessage"></textarea></div>    </div> 
  </form></div>
  <div class="share-buttons">
  <div class="submit"><input class="button medium blue" id="publish-button" style="float:right" type="submit" value="Publish"></div><button type="submit" class="button medium blue" id="cancel-share" style="float:right">Cancel</button>  </div>
  <div class="span-8 last" id="share-loader-container" style="display:none;float:right;" align="center">
    <img src="/fonykweb/img/ajax-loader.gif" id="loader" alt="">  </div>
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 0px; left: 0px; display: none; "></ul></div></div>

It functions on 3 different places on my site. In 2 it works just fine, but in the other, after the classes are swapped and the values change and the program enters the jQuery core code block, it’s all changed back. When debugging I can see that my code gets executed, but when the core gets executed it all gets reverted, any idea what could be happening?

UPDATE:

Found the code that was messing it up, I seemed to have got careless when coding and coded it twice there, so it was getting called correctly, but twice, so it set the values back. I’m gonna give the answer to John Strickler since only he posted one.

Answer 1

Not a clue on what’s happening… but try reducing your code like this:

$(this).toggleClass('green red');
$('#ShareTwitterPublish').val(function () { return +!$(this).val(); });