在jQuery的類更改中添加了不需要的「display：none」

Question

我正在處理的音樂庫網站上發生了一個奇怪的錯誤。預期的功能（採用複選框的形式，動態地將它們更改爲可選字詞，突出顯示並單擊「檢查」關聯的複選框，然後根據突出顯示的標籤自動更新下面的歌曲）工作正常 - 但是當您單擊選定標籤將其刪除，它會對下面的數據執行正確的功能，並刪除高亮顯示，但所有其他選定標籤都會添加「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; 
} 

在此先感謝您的幫助！如果登錄並在上下文中查看此信息很有幫助，請轉至the test site並使用用戶名：stackoverflowuser;密碼：HelpMeFigureThisOut - 一旦你登錄，點擊「查看歌曲」，jQuery引用頁面頂部的標籤。

Answer 1

看在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"); } 
    } 
    }); 

因爲click事件從<label>元素的<html>元素傳播。該處理器被執行。它在<label>元素上的點擊處理程序之後執行，它會從<label>元素中刪除「已單擊」類。由於<label>元素是event.target，不再有「點擊」類，下面一行是執行：

$(".clicked").hide().removeClass("clicked"); 

這條線隱藏所有仍然有「點擊」類的標籤。