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>元素上的点击处理程序之后执行，这会删除＆＃34;点击的＆＃34;来自<label>元素的类。由于<label>元素是event.target，因此不再有＆＃34;点击＆＃34; class，执行以下行：

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

该行隐藏了所有仍然有＆＃34;点击的标签＆＃34;类。

在jQuery中的类更改中添加了不需要的“display：none”

1 个答案: