不需要的"显示:none"在jQuery中添加了类更改
Unwanted "display: none" added on class change in jQuery
我在一个音乐库网站上发现了一个奇怪的bug。预期的功能(采用复选框的形式,动态地将它们更改为可选择的单词,突出显示并点击"选中"相关的复选框,然后根据突出显示的标签自动更新下面的歌曲)工作良好-但是当您单击选中的标签以删除它时,它会使用下面的数据执行正确的功能,并删除突出显示,但所有其他选中的标签都将获得"display: none"添加到它们。
这里,我认为,是导致奇怪问题的函数:
// Given an label "$label," if it hasn't been selected, then
// highlight the label area and set the "checked" value of the
// appropriate checkbox input to true; if it is already selected,
// remove the highlight and set the "checked" value of the appropriate
// checkbox to "false"
function highlightAndCheck( $label )
{
var id = $label.attr("id"),
$checkbox = $label.prev(),
val = $checkbox.attr("value");
if( id === val )
{
if( $label.hasClass("clicked") )
{
$checkbox.prop("checked", false);
$label.removeClass("clicked");
} else
{
$checkbox.prop("checked", true);
$label.addClass("clicked");
}
}
}
这是该页面的完整jQuery代码。如果有什么令人困惑的地方,我可以提供更多的代码,但我希望标签等是直接的:
$(function() { //on document ready
var $categoriesAndTags = $("div#categories-and-tags"),
$tagCategory = $categoriesAndTags.find("div.tag-category"),
$searchButton = $categoriesAndTags.find("input#public-user-tag-search-submit");
// First, hide the checkboxes and search button, since we don't need them in the dynamic version
$tagCategory.addClass("tag-spinner-skin")
.find("input[type=checkbox]").hide();
$tagCategory.find("br").hide();
$searchButton.hide();
// Make it so then clicking on the text of a tag makes the hidden select box "select"
$tagCategory.find("label").each(function(){
$(this).on("click",function(){
var $this = $(this);
highlightAndCheck( $this );
searchByTags();
//While the unwanted "display:none" bug is happening, use this to make them re-appear on next click
$this.siblings("label").show();
});
});
// Make the search update automatically when a select box is clicked or unclicked.
var tagIDs = getUrlVarValArray( "tagID" );
$tagCategory.find("label").each(function(){
var $this = $(this),
id = $this.attr("id");
if( tagIDs.indexOf( id ) > -1 )
{ highlightAndCheck( $this ); }
});
});
function searchByTags( tags )
{
data = $("form#tag-select input").serialize()
if( data.length > 0 )
{
data += "&search=search";
}
$.ajax({
url: "songs/",
data: data,
type: "GET",
success: function(data){
// DO THIS if we successfully do the Ajax call
$newSongPlayers = $(data).find("div#songs-area");
$("div#songs-area").replaceWith( $newSongPlayers );
$.getScript("javascripts/public.js");
}
});
}
// Given an label "$label," if it hasn't been selected, then
// highlight the label area and set the "checked" value of the
// appropriate checkbox input to true; if it is already selected,
// remove the highlight and set the "checked" value of the appropriate
// checkbox to "false"
function highlightAndCheck( $label )
{
var id = $label.attr("id"),
$checkbox = $label.prev(),
val = $checkbox.attr("value");
if( id === val )
{
if( $label.hasClass("clicked") )
{
$checkbox.prop("checked", false);
$label.removeClass("clicked");
} else
{
$checkbox.prop("checked", true);
$label.addClass("clicked");
}
}
}
function getUrlVarValArray( needle )
{
var results = [],
hash,
hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
if( needle.length > 0 )
{
if( hash[0] === needle )
{
results[ results.length ] = hash[1]; // array[ array.length ] is a faster way to apend than array.push() in small arrays
}
}
}
return results;
}
提前感谢您的帮助!如果登录并在上下文中看到这有帮助,请访问测试站点并使用用户名:stackoverflowuser;密码:HelpMeFigureThisOut——一旦你登录了,点击"查看歌曲",jQuery就会引用页面顶部的标签。
查看public.js
文件中的以下代码:
$("html").on("click", function(event){
if(!$(event.target).is('.options-button')
&& !$(event.target).is('input.add-new-playlist')
&& !$(event.target).is('button.submit-new-playlist')
&& !$(event.target).is('button.add-song-to-playlist')
&& !$(event.target).is('button.playlist-popup-button')
)
{
if(!$(event.target).is('.clicked') && !$(event.target).is('.clicked > div') )
{ $(".clicked").hide().removeClass("clicked"); }
}
});
这个处理程序被执行,因为点击事件从<label>
元素传播到<html>
元素。它在<label>
元素上的click处理程序之后执行,这将从<label>
元素中删除"clicked"类。由于<label>
元素是event.target
,并且不再具有"clicked"类,因此执行以下行:
$(".clicked").hide().removeClass("clicked");
该行隐藏了所有仍然具有"clicked"类的标签。
相关文章:
- Node.js服务器问题-已添加“/"在浏览器中查找文件时
- 改变“;onClick"这个jQuery的操作从清除输入文本改为将输入文本添加到下面的列表中
- 我正在使用php includes来构建一个多页面网站.使用jquery,我将如何添加一个类"活动的”;添加到
- jQuery脚本,它搜索现有的查询参数并且不添加“"如果存在
- 添加前缀“#"到数组中的某些字符串值
- JS/JQuery:动态添加"图案“;以及“;标题“;属性以形成输入
- "未捕获的类型错误:未定义的不是函数“;当向输入字段添加值时
- 将元素添加到javascript中"字典“;大堆
- ExtJS::如何添加特定的"specialkey事件”;表示逗号到数字字段
- 添加“<strong>"到某个单词使用handlers.js
- 如何在Wordpress文件中添加自定义javascript代码"single.php”;
- 如何为jQuery.append($(<option/>",{..})的每个三元大小写添加超过1个
- window.open()添加一个rel="nofollow”;属性
- "添加到手表“;铬键盘快捷键
- "更改“;添加要选择的选项时正在激发
- "这个“;当我向事件处理程序函数添加参数时会发生更改
- 添加“-"每个单词-javascript
- "添加到购物车”;按钮不'由于ReferenceError,无法工作
- 有没有一种简单的方法来转换“;字体"style属性添加到其中的每一个'他的个人风格
- 为什么我的动画"重放的“;当通过innerHTML添加元素时