Question

我的意图是在单击div时向标题添加一个类。我已经包含了我正在使用的网站，只是为了让事情变得更容易：

我在标题中添加了一个“扩展”类。这是为了显示按下按钮后导航应该如何显示。我创建了一个简单的Javascript，它应该在我点击按钮时提供警报。我似乎无法让这个工作。我做错了什么想法？

谢谢！

编辑 - 点击按钮div后，我能够正常工作。我非常接近完成这个！ :)现在我陷入了未正确传递的变量。

<script type= "text/javascript">
var expanded = false;
function btnClick(){
    alert('The variable expanded is '+expanded);
    if(expanded === false) {
        document.getElementById("header").className = "expanded";
        var expanded = true;
    } else {
        document.getElementById("header").className.replace(/\bexpanded\b/,'');
        var expanded = false;
    }
};
</script>

我现在正在更新ftp服务器：）

Answer 1

使用jQuery时，必须以已经加载元素的方式绑定事件。

你有：

<script type= "text/javascript">
$("#expandBtn").click(function(){
   alert('hello');
});
</script>

我认为你想要的是：

<script type= "text/javascript">
$(document).ready(function(){
  $("#expandBtn").click(function(){
     alert('hello');
     $('header').addClass('expanded');
  });
});
</script>

API documentation将成为你的朋友。第一步 - ready()。

<强>更新

你有这个调用jQuery：

$j('#header').addClass('expanded');

但您的标记适用于HTML5元素<header>。在这种情况下，您的jQuery需要更改为：

$j('header').addClass('expanded');

$j是你的jQuery对象。更典型的情况是，您可以使用$或jQuery。

时间到了jQuery Selectors！

<强>更新

这是您的更新页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>itsMontoya</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script type= "text/javascript">
    $(document).ready(function(){
        $('.expandBtn').bind('click', function(){
            $('header').toggleClass('expanded');
        });
    });
    </script>
</head>
<body>
    <div class="wrap">
        <header id="header" class="">
            <div class="blackBG transparent"></div>
            <nav>
                <ul>
                    <li>
                        Home<img src="images/home.png">
                    </li>
                    <li>
                        Pictures<img src="images/pictures.png">
                    </li>
                    <li>
                        Music<img src="images/mymusic.png">
                    </li>
                    <li>
                        About Me<img src="images/aboutme.png">
                        </li>
                    <li>
                        Resume<img src="images/resume.png">
                    </li>
                </ul>
            </nav>
            <div id="logo" class="logo"><p>itsMontoya</p></div><div id="expandBtn" class="expandBtn anchor"></div>
        </header>
        <section class="content">
            <article class="blogEntry"></article>
        </section>
        <footer class="anchor">
            <div class="over anchor"><p>2011 itsMontoya.com</p></div>
            <div class="blackBG transparent anchor under"></div>
        </footer>
    </div>
</body>
</html>

Answer 2

这是将点击处理程序绑定到div并将该类添加到标题中的方法：

var yourDiv = document.getElementById('your-div-id');
var header = document.getElementById('header');

yourDiv.onclick = function(){
    alert("yourDiv was clicked");
    header.className = "newCssClass";
};

以上假设标记如下：

<div id="your-div-id">Click</div>
<div id="header"></div>

这是an example。

更新： expanded变量无法正常工作的原因是因为您在{expanded中创建了一个名为btnClick()的重复本地变量{1}}方法。因此，您在函数外部声明的全局expanded变量永远不会更新。

这是由您使用var关键字的方式引起的：

在函数外部使用时，var会创建一个可在当前文档中的任何位置访问的全局变量。
在函数var中使用时，会创建一个只能在该函数中访问的局部变量。

这是您的功能已按照您的预期清理完毕：

// Define global variable (using var outside function)
var expanded = true; 
function btnClick(){   

    alert('The variable expanded is '+expanded);

    // Condition for true
    if(expanded) {
        // do something

    // Condition for false
    } else {
        // do something else
    }

    // Flips boolean value of the global variable (notice lack of var keyword)
    expanded = !expanded;    
}

以下an example显示了更新expanded变量的正确方法。

Answer 3

使用jQuery：

$('#your_div_id').click(function(){
    console.log("Clicked.");
    $("#header").addClass('expanded');
});

更新

在您的代码中：

var expanded = false;
function btnClick(test){
    if($expanded === false) {
        .
        .
        .

到底是什么$expanded？请注意，在JavaScript中，我们不需要变量的$符号。

使用Javascript单击div时向Header添加样式

3 个答案:

更新