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(); });
相关文章:
- 无法从 jQuery RSS Feed 中的 localStorage 动态替换类
- 如何使用jQuery自动打开页面上的所有链接
- 如何使用jquery在填充自动完成的值后使文本框只读
- jQuery:循环一个具有不同超时值的循环
- 用程序搜索JQuery数据表中的文本
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- jQuery匹配JSON对象的部分文本
- Jquery POST未填充数组
- JQuery使计数器每次更改时都会增加
- 如何在Angular2中使用jQuery插件
- 提高JQuery的性能
- 无法在通过jQuery的ajax加载的页面中执行javascript
- JQuery合并了keyup和focusout两个函数
- 如何使用jQuery选择下拉列表的值
- 将PHP变量传递给jQuery时遇到问题
- jQuery UI自动完成突然停止工作
- 剑道网格jQuery动画()问题
- 如何使jQuery插件函数可调用以供独立使用,而不在集合上操作
- jquery点击函数select&取消选择
- jquery试图按名称获取按钮位置