一次后Jquery无法更改类名

时间：2015-09-03 12:16:14

标签： javascript php jquery html

以下是我的下拉菜单显示和消失的代码..

如果班级名称为“下拉式右下拉”，则菜单将关闭

如果班级名称是“下拉拉开 - 右开”，则菜单将被打开

<li class="dropdown pull-right" id="tobechanged">            
    <a data-toggle="dropdown" class="dropdown-toggle" aria-expanded="false">
    <i class="fa fa-user"></i> Admin <b class="caret"></b>              
    </a>
</li>

所以，我写了这个查询

$(".dropdown-toggle" ).click(function() {
console.log(document.getElementById("tobechanged").className);
if (document.getElementById("tobechanged").className == "dropdown pull-right" ) {
      console.log('opening menu');
      document.getElementsByClassName("dropdown-toggle").className = "dropdown pull-right open";
    }
    else
    {
      console.log('closing menu');
    document.getElementsByClassName("dropdown-toggle").className = "dropdown pull-right";
    }

});

它只在第一次有效。如果我更改为另一个页面，则只有控制台console.log('opening menu');正常工作且类名正在改变..

我正在做的错误是什么？如何更改班级名称？

注意：我正在使用angularjs，因此页面不会完全重新加载

4 个答案:

答案 0 :(得分：1)

我看到的问题是，一旦执行该行：

document.getElementsByClassName("dropdown-toggle").className = "dropdown pull-right open";

这基本上会改变你的html：

<li class="dropdown pull-right" id="tobechanged">            
   <a data-toggle="dropdown" class="**dropdown-toggle**" aria-expanded="false">
   <i class="fa fa-user"></i> Admin <b class="caret"></b>              
   </a>
</li>

到

<li class="dropdown pull-right" id="tobechanged">            
   <a data-toggle="dropdown" class="**dropdown pull-right open**" aria-expanded="false">
   <i class="fa fa-user"></i> Admin <b class="caret"></b>              
   </a>
</li>

基本上你的元素不再适用于click事件，因为click会按类名订阅你更改的元素。 

$(".dropdown-toggle" )

希望这不会太混乱。

答案 1 :(得分：1)

我认为您应该更改父级li元素的类而不是其中的元素。

答案 2 :(得分：0)

修复加上一些额外的改进;无需多次搜索元素

$(".dropdown-toggle" ).click(function() {
  var el = document.getElementById("tobechanged");
  if (el.className == "dropdown pull-right" ) {
      console.log('opening menu');
      el.className = "dropdown pull-right open";
  }
  else {
      console.log('closing menu');
      el.className = "dropdown pull-right";
  }
});

在JQuery中执行此操作：

$(".dropdown-toggle" ).click(function() {
  $(this).closest('#tobechanged').toggleClass('open');
});

<强>更新 演示https://jsfiddle.net/n13svnLL/

答案 3 :(得分：0)

<?PHP

require_once("class.phpmailer.php");

class FG_CaptchaHandler
{
    function Validate() { return false;}
    function GetError(){ return '';}
}

class FGContactForm
{
    var $receipients;
    var $errors;
    var $error_message;
    var $name;
    var $email;
    var $message;
    var $from_address;
    var $form_random_key;
    var $conditional_field;
    var $arr_conditional_receipients;
    var $fileupload_fields;
    var $captcha_handler;

    var $mailer;

function FGContactForm()
{
    $this->receipients = array();
    $this->errors = array();
    $this->form_random_key = 'HTgsjhartag';
    $this->conditional_field='';
    $this->arr_conditional_receipients=array();
    $this->fileupload_fields=array();

    $this->mailer = new PHPMailer();
    $this->mailer->CharSet = 'utf-8';
}

function EnableCaptcha($captcha_handler)
{
    $this->captcha_handler = $captcha_handler;
    session_start();
}

function AddRecipient($email,$name="")
{
    $this->mailer->AddAddress($email,$name);
}

function SetFromAddress($from)
{
    $this->from_address = $from;
}
function SetFormRandomKey($key)
{
    $this->form_random_key = $key;
}
function GetSpamTrapInputName()
{
    return 'sp'.md5('KHGdnbvsgst'.$this->GetKey());
}
function SafeDisplay($value_name)
{
    if(empty($_POST[$value_name]))
    {
        return'';
    }
    return htmlentities($_POST[$value_name]);
}
function GetFormIDInputName()
{
    $rand = md5('TygshRt'.$this->GetKey());

    $rand = substr($rand,0,20);
    return 'id'.$rand;
}


function GetFormIDInputValue()
{
    return md5('jhgahTsajhg'.$this->GetKey());
}

function SetConditionalField($field)
{
    $this->conditional_field = $field;
}
function AddConditionalReceipent($value,$email)
{
    $this->arr_conditional_receipients[$value] =  $email;
}

function AddFileUploadField($file_field_name,$accepted_types,$max_size)
{

    $this->fileupload_fields[] =
        array("name"=>$file_field_name,
        "file_types"=>$accepted_types,
        "maxsize"=>$max_size);
}

function ProcessForm()
{
    if(!isset($_POST['submitted']))
    {
       return false;
    }
    if(!$this->Validate())
    {
        $this->error_message = implode('<br/>',$this->errors);
        return false;
    }
    $this->CollectData();

    $ret = $this->SendFormSubmission();

    return $ret;
}

function RedirectToURL($url)
{
    header("Location: $url");
    exit;
}

function GetErrorMessage()
{
    return $this->error_message;
}
function GetSelfScript()
{
    return htmlentities($_SERVER['PHP_SELF']);
}

function GetName()
{
    return $this->name;
}
function GetEmail()
{
    return $this->email;
}
function GetMessage()
{
    return htmlentities($this->message,ENT_QUOTES,"UTF-8");
}


function SendFormSubmission()
{
    $this->CollectConditionalReceipients();

    $this->mailer->CharSet = 'utf-8';

    $this->mailer->Subject = "Customer installation competition submition from $this->name";

    $this->mailer->From = $this->GetFromAddress();

    $this->mailer->FromName = $this->name;

    $this->mailer->AddReplyTo($this->email);

    $message = $this->ComposeFormtoEmail();

    $textMsg = trim(strip_tags(preg_replace('/<(head|title|style|script)[^>]*>.*?<\/\\1>/s','',$message)));
    $this->mailer->AltBody = @html_entity_decode($textMsg,ENT_QUOTES,"UTF-8");
    $this->mailer->MsgHTML($message);

    $this->AttachFiles();

    if(!$this->mailer->Send())
    {
        $this->add_error("Failed sending email!");
        return false;
    }

    return true;
}

function CollectConditionalReceipients()
{
    if(count($this->arr_conditional_receipients)>0 &&
      !empty($this->conditional_field) &&
      !empty($_POST[$this->conditional_field]))
    {
        foreach($this->arr_conditional_receipients as $condn => $rec)
        {
            if(strcasecmp($condn,$_POST[$this->conditional_field])==0 &&
            !empty($rec))
            {
                $this->AddRecipient($rec);
            }
        }
    }
}


function IsInternalVariable($varname)
{
    $arr_interanl_vars = array('scaptcha',
                        'submitted',
                        $this->GetSpamTrapInputName(),
                        $this->GetFormIDInputName()
                        );
    if(in_array($varname,$arr_interanl_vars))
    {
        return true;
    }
    return false;
}

function FormSubmissionToMail()
{
    $ret_str='';
    foreach($_POST as $key=>$value)
    {
        if(!$this->IsInternalVariable($key))
        {
            $value = htmlentities($value,ENT_QUOTES,"UTF-8");
            $value = nl2br($value);
            $key = ucfirst($key);
            $ret_str .= "<div class='label'>$key :</div><div class='value'>$value </div>\n";
        }
    }
    foreach($this->fileupload_fields as $upload_field)
    {
        $field_name = $upload_field["name"];
        if(!$this->IsFileUploaded($field_name))
        {
            continue;
        }        

        $filename = basename($_FILES[$field_name]['name']);

        $ret_str .= "<div class='label'>File upload '$field_name' :</div><div class='value'>$filename </div>\n";
    }
    return $ret_str;
}

function ExtraInfoToMail()
{
    $ret_str='';

    $ip = $_SERVER['REMOTE_ADDR'];
    $ret_str = "<div class='label'>IP address of the submitter:</div><div class='value'>$ip</div>\n";

    return $ret_str;
}

function GetMailStyle()
{
    $retstr = "\n<style>".
    "body,.label,.value { font-family:Arial,Verdana; } ".
    ".label {font-weight:bold; margin-top:5px; font-size:1em; color:#333;} ".
    ".value {margin-bottom:15px;font-size:0.8em;padding-left:5px;} ".
    "</style>\n";

    return $retstr;
}
function GetHTMLHeaderPart()
{
     $retstr = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">'."\n".
               '<html><head><title></title>'.
               '<meta http-equiv=Content-Type content="text/html; charset=utf-8">';
     $retstr .= $this->GetMailStyle();
     $retstr .= '</head><body>';
     return $retstr;
}
function GetHTMLFooterPart()
{
    $retstr ='</body></html>';
    return $retstr ;
}
function ComposeFormtoEmail()
{
    $header = $this->GetHTMLHeaderPart();
    $formsubmission = $this->FormSubmissionToMail();
    $extra_info = $this->ExtraInfoToMail();
    $footer = $this->GetHTMLFooterPart();

    $message = $header."Submission details:<p>$formsubmission</p><hr/>$extra_info".$footer;

    return $message;
}

function AttachFiles()
{
    foreach($this->fileupload_fields as $upld_field)
    {
        $field_name = $upld_field["name"];
        if(!$this->IsFileUploaded($field_name))
        {
            continue;
        }

        $filename =basename($_FILES[$field_name]['name']);

        $this->mailer->AddAttachment($_FILES[$field_name]["tmp_name"],$filename);
    }
}

function GetFromAddress()
{
    if(!empty($this->from_address))
    {
        return $this->from_address;
    }

    $host = $_SERVER['SERVER_NAME'];

    $from ="nobody@$host";
    return $from;
}

function Validate()
{
    $ret = true;

    if(empty($_POST[$this->GetFormIDInputName()]) ||
      $_POST[$this->GetFormIDInputName()] != $this->GetFormIDInputValue() )
    {

        $this->add_error("Automated submission prevention: case 1 failed");
        $ret = false;
    }


    if(!empty($_POST[$this->GetSpamTrapInputName()]) )
    {

        $this->add_error("Automated submission prevention: case 2 failed");
        $ret = false;
    }


    if(empty($_POST['name']))
    {
        $this->add_error("Please provide your name");
        $ret = false;
    }
    else
    if(strlen($_POST['name'])>50)
    {
        $this->add_error("Name is too big!");
        $ret = false;
    }


    if(empty($_POST['email']))
    {
        $this->add_error("Please provide your email address");
        $ret = false;
    }
    else
    if(strlen($_POST['email'])>50)
    {
        $this->add_error("Email address is too big!");
        $ret = false;
    }
    else
    if(!$this->validate_email($_POST['email']))
    {
        $this->add_error("Please provide a valid email address");
        $ret = false;
    }


    if(strlen($_POST['message'])>2048)
    {
        $this->add_error("Message is too big!");
        $ret = false;
    }


    if(isset($this->captcha_handler))
    {
        if(!$this->captcha_handler->Validate())
        {
            $this->add_error($this->captcha_handler->GetError());
            $ret = false;
        }
    }

    if(!empty($this->fileupload_fields))
    {
     if(!$this->ValidateFileUploads())
     {
        $ret = false;
     }
    }
    return $ret;
}

function ValidateFileType($field_name,$valid_filetypes)
{
    $ret=true;
    $info = pathinfo($_FILES[$field_name]['name']);
    $extn = $info['extension'];
    $extn = strtolower($extn);

    $arr_valid_filetypes= explode(',',$valid_filetypes);
    if(!in_array($extn,$arr_valid_filetypes))
    {
        $this->add_error("Valid file types are: $valid_filetypes");
        $ret=false;
    }
    return $ret;
}

function ValidateFileSize($field_name,$max_size)
{
    $size_of_uploaded_file =
            $_FILES[$field_name]["size"]/2048;//size in KBs
    if($size_of_uploaded_file > $max_size)
    {
        $this->add_error("The file is too big. File size should be less than $max_size KB");
        return false;
    }
    return true;
}

function IsFileUploaded($field_name)
{
    if(empty($_FILES[$field_name]['name']))
    {
        return false;
    }
    if(!is_uploaded_file($_FILES[$field_name]['tmp_name']))
    {
        return false;
    }
    return true;
}
function ValidateFileUploads()
{
    $ret=true;
    foreach($this->fileupload_fields as $upld_field)
    {
        $field_name = $upld_field["name"];

        $valid_filetypes = $upld_field["file_types"];

        if(!$this->IsFileUploaded($field_name))
        {
            continue;
        }

        if($_FILES[$field_name]["error"] != 0)
        {
            $this->add_error("Error in file upload; Error code:".$_FILES[$field_name]["error"]);
            $ret=false;
        }

        if(!empty($valid_filetypes) &&
         !$this->ValidateFileType($field_name,$valid_filetypes))
        {
            $ret=false;
        }

        if(!empty($upld_field["maxsize"]) &&
        $upld_field["maxsize"]>0)
        {
            if(!$this->ValidateFileSize($field_name,$upld_field["maxsize"]))
            {
                $ret=false;
            }
        }

    }
    return $ret;
}

function StripSlashes($str)
{
    if(get_magic_quotes_gpc())
    {
        $str = stripslashes($str);
    }
    return $str;
}

function Sanitize($str,$remove_nl=true)
{
    $str = $this->StripSlashes($str);

    if($remove_nl)
    {
        $injections = array('/(\n+)/i',
            '/(\r+)/i',
            '/(\t+)/i',
            '/(%0A+)/i',
            '/(%0D+)/i',
            '/(%08+)/i',
            '/(%09+)/i'
            );
        $str = preg_replace($injections,'',$str);
    }

    return $str;
}

function CollectData()
{
    $this->name = $this->Sanitize($_POST['name']);
    $this->email = $this->Sanitize($_POST['email']);
    $this->message = $this->StripSlashes($_POST['message']);
}

function add_error($error)
{
    array_push($this->errors,$error);
}
function validate_email($email)
{
    return eregi("^[_\.0-9a-zA-Z-]+@([0-9a-zA-Z][0-9a-zA-Z-]+\.)+[a-zA-Z]{2,6}$", $email);
}

function GetKey()
{
    return $this->form_random_key.$_SERVER['SERVER_NAME'].$_SERVER['REMOTE_ADDR'];
}

}

?>
相关问题
最新问题