基本的JQuery问题。 .click功能不在网站上执行

Question

我有一个网站，我正在尝试编写一段JQuery代码，这样当单击某个特定元素（#designbox）时，它会从高度更改css：80px;高度：100％;

我的代码如下所示：

$(document).ready(function(){
$("#designbox").click(function(){
    $("#designbox").height("100%");
    });
});

我也尝试了以下方法：

$(document).ready(function(){
$("#designbox").click(function(){
    $("#designbox").css("height","100%");
    });
});

使用这两种方法时，单击元素时没有任何变化。我目前正在处理的页面位于http://sarahduryea.com/?page_id=5，“#designbox”元素是页面上的大颜色部分。我做错了什么？

另外，我检查了并且代码正确链接到页面。它被命名为SarahScript.js。

感谢您的帮助！

Answer 1

似乎使用了jQuery no-conflict。通常，您可以使用$访问jQuery。在我的图像中，您可以看到$未定义，但jQuery变量是正确的。

使用

jQuery(document).ready(function(){
    jQuery("#designbox").click(function(){
        jQuery("#designbox").height("100%");
    });
});

Answer 2

另外，我查看了您发布的链接的页面源代码，看起来您在多个元素上使用ID“designbox”。每页只能使用一次ID（在单个元素上）。

您目前有类似的内容：

<div class="designbox1" id="designbox">
    <!-- your code here -->
</div>

<div class="designbox2" id="designbox">
    <!-- your code here -->
</div>

<div class="designbox3" id="designbox">
    <!-- your code here -->
</div>

为避免在多个元素上使用相同的id，您可以为这三个元素中的每一个添加一个唯一的类（在此示例中为“boxclick”），并在该类上调用click事件：

HTML：

<div class="boxclick designbox1">
    <!-- your code here -->
</div>

<div class="boxclick designbox2">
     <!-- your code here -->
</div>

<div class="boxclick designbox3">
    <!-- your code here -->
</div>

JQuery的：

jQuery(document).ready(function() {
    jQuery(".boxclick").click(function(){
        jQuery(".boxclick").css("height","100%");
    });
});

我还发现当要点击的所需元素悬停在上面时，将光标更改为指针很有用。这样，用户就知道可以点击该元素。你可以通过CSS完成这个：

.boxclick {
    cursor:pointer;
}

希望这有帮助！