jQuery - 自己改变类

时间:2012-01-25 21:24:35

标签: javascript jquery css class

我有以下代码

$('#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>

它在我网站上的3个不同位置运行。在2中,它工作得很好,但在另一方面,在交换类并且值发生变化并且程序进入jQuery核心代码块之后,它们都会被更改回来。在调试时,我可以看到我的代码被执行了,但是当核心被执行时,所有内容都会被恢复,任何想法可能会发生什么?

更新

找到了弄乱它的代码,我似乎在编码并在那里编码两次时不小心,所以它被正确调用,但两次,所以它将值设置回来。我会给John Strickler的答案,因为他只发了一个。

1 个答案:

答案 0 :(得分:2)

不知道发生了什么......但尝试减少你的代码:

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