jQuery-自行更改类

jQuery - Changing classes back on its own

本文关键字:jQuery-      更新时间:2023-09-26

我有以下代码

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

它在我的网站上的三个不同的地方运行。在2中,它运行得很好,但在另一个中,在交换了类,值发生了变化,程序进入jQuery核心代码块后,它就全部变回了。当调试时,我可以看到我的代码被执行了,但当核心被执行时,所有的代码都被恢复了,你知道会发生什么吗?

更新:

发现了把它搞砸的代码,我在编码时似乎很粗心,在那里编码了两次,所以它被正确地调用了,但两次,因此它把值设置回了。我要给约翰·斯特里克勒答案,因为只有他发布了一个。

不知道发生了什么。。。但是试着这样减少你的代码:

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