jQuery - изменение классов самостоятельно

91
8

У меня есть следующий код

$('#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, все это изменилось. При отладке я вижу, что мой код запускается, но когда ядро запускается, все возвращается, любая идея, что может произойти?

ОБНОВИТЬ:

Нашел код, который испортил его, я, казалось, стал небрежным при кодировании и закодировал его дважды там, поэтому его вызывали правильно, но дважды, поэтому он возвращал значения обратно. Я собираюсь дать ответ Джону Стриклеру, поскольку только он опубликовал его.

спросил(а) 2012-01-26T00:24:00+04:00 8 лет, 1 месяц назад
1
Решение
60

Не подскажите, что происходит... но попробуйте уменьшить свой код следующим образом:

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

ответил(а) 2012-01-26T00:30:00+04:00 8 лет, 1 месяц назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема