不需要的"显示:none"在jQuery中添加了类更改

Unwanted "display: none" added on class change in jQuery

本文关键字:quot 添加 none 显示 不需要 jQuery      更新时间:2023-09-26

我在一个音乐库网站上发现了一个奇怪的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"类的标签。