Rails 5.1 应用程序,使用 jquery-rails(加载 jQuery 1.12.4)。我在一个正在工作的页面的标题中包含了一个函数。我修复了一个与此无关的丢失 JS 文件函数错误,现在它在加载时看起来正确,然后翻转(看起来是在 Rails 控制台中加载图标时)。如果我导致缺少方法错误(在客户端验证 JS 中),那么此代码可以正常工作,这意味着我还有其他事情要做。
一旦翻转,它就.togglebutton
不起作用(用下面乔希的评论修复了这个问题)
这种行为可以在这里看到:https : //www.patchvault.org/lodges
功能:
$(document).ready(function() {
$('.nni').toggleClass('hidden');
$('.togglebutton').click(function() {
$('.nni').toggleClass('hidden');
$('.togglebutton').toggleClass('nodisplay');
});
});
在 Josh 下面的评论(和其他 SO 搜索)之后更新了功能:
$(document).ready(function () {
$(window).load(function () {
$('.nni').toggleClass('hidden');
$(document).on('click', '.togglebutton', function() {
$('.nni').toggleClass('hidden');
$('.togglebutton').toggleClass('nodisplay');
});
});
});
切换按钮代码:
<div id="button_functions">
<a class="togglebutton nodisplay" href="javascript:;">Hide No Known Issue Lodges (16)</a>
<a class="togglebutton" href="javascript:;">Show No Known Issue Lodges (16)</a>
</div>
相关 CSS:
.hidden,
.nodisplay { display: none; }
李(例子):
<ul class="lodge-list">
<li class="lodge nni">
<a href="/lodges/2a-trenton"><img alt="No known issues for 2A" style="width: 200px;" src="/assets/[email protected]"></a>
<p class="lodge-name">
<a href="/lodges/2a-trenton"><b>2</b> Trenton</a><br>
<span>
(2A)
</span>
</p>
</li>
<li class="lodge ">
<a href="/lodges/2-5a-ntiasohen-gattopuin"><img alt="2.5 Ntiasohen Gattopuin" class="featured-image-home" src="https://patchvault.s3.amazonaws.com/uploads/issue/image/4114/list_Fish_Flap_1992.jpg?X-Amz-Expires=600&X-Amz-Date=20180711T120316Z&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIOPOW7QY5HS62KZA/20180711/us-east-1/s3/aws4_request&X-Amz-SignedHeaders=host&X-Amz-Signature=19a5afd4d18ccb7951c756a4916aef200026ac447f45452ca66427480a6f0d27"></a>
<!-- <= link_to image_tag(lodge.issues.first.image_url(:list)),
lodge_path(
lodge.slug
) %> -->
<p class="lodge-name">
<a href="/lodges/2-5a-ntiasohen-gattopuin"><b>2.5</b> Ntiasohen Gattopuin</a><br>
<span>
(2.5A)
</span>
</p>
</li>
[ Other lodges are one of these two styles ]
</ul>
当前正在运行。如果我重新引入控制台错误(rails 客户端表单验证缺少文件),它会起作用。但是一定有其他事情发生,我在这里做错了导致这种情况。有什么想法吗?
好的,所以我最终能够解决这个问题的方式比其他任何事情都简单:
我有将“nni”设置为“nni hidden”的类设置的rails ERB。所以这两个类都适用于页面加载。从那里,JS 更简单:
$(document).ready(function () {
$(document).on('click', '.togglebutton', function() {
$('.nni').toggleClass('hidden');
$('.togglebutton').toggleClass('nodisplay');
});
});
可能也是一种使它更简单/更清洁的方法,但它有效。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句