我无法让 jQuery 工作。我错过了什么？ [关闭]答案

【问题标题】：I am unable to make jQuery Work. What am I missing? [closed]我无法让 jQuery 工作。我错过了什么？ [关闭]
【发布时间】：2014-02-18 08:02:35
【问题描述】：

我正在尝试隐藏、显示、移动图像，但我无能为力。我看到了按钮，但什么也没发生。 jQuery的链接是错误的还是其他的？我所做的一切似乎都不起作用。目前不知道该怎么办...

<html lang="en-us">

<head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <link type="text/css" rel="stylesheet" href="jquery.css"/>

            <script type="text/javascript">
        $(document).ready(function() {
        $("img").addClass("wrappedElement");


        $("#Hide All Images").click(function(){
        $("img").hide("fast");  
        });

        $("#Show All Images").click(function(){
        $("img").show("fast");  
        });

        $("#Show Even Images").click(function() {
        if ($("img:even").is(':visible') && $("img:odd").is(':visible')) {
            $("img:odd").toggle("fast");
        }else{
            $("img:even").show("fast");
        }   
        });

        $("#Show Odd Images").click(function(){
        if ($("img:odd").is(':visible') && $("img:even").is(':visible')) { 
            $("img:even").toggle("fast");
        }else{
            $("img:odd").show("fast");
        }
        });

        $("#Right Shift").click(function(){
        $("img").slideRight();
        });

        $("#Left Shift").click(function(){  
        $("img").slideLeft();

        });
        });

    </script>

<body>


    <div id="header">
        <button id="Hide All Images">Hide All Images</button>
        <button id="Show Even Images">Show Even Images</button>
        <button id="Show Odd Images">Show Odd Images</button>
        <button id="Right Shift">Right Shift</button>
        <button id="Left Shift">Left Shift</button>
    </div>

    <div id ="content">
    <img  class="photo" src="photo_one.jpg" alt="one">
    <img  class="photo" src="photo_two.jpg" alt="two">
    <img  class="photo" src="photo_three.jpg" alt="three">
    <img  class="photo" src="photo_four.jpg" alt="four">
    <img  class="photo" src="photo_five.jpg" alt="five">
    </div>


</body>

【问题讨论】：

您的 jquery 链接缺少 http: 作为前缀。
哦，不工作我认为你的意思是点击事件是由 mouseOvers 触发的？
@TravisJ 不需要。建议使用无协议 URI
@Phil - 很有趣，感谢您提供我没有听说过无协议 URI 的信息。
@Rooster，我的意思是点击按钮，什么都没有发生。

标签： javascript jquery html

【解决方案1】：

从你的类和 id 中删除空格，用下划线（或连字符，或任何你想要的）替换它们。

例如：

<button id="Hide_All_Images">Hide All Images</button>

还有：

$("#Hide_All_Images").click(function(){

在使用 $ 函数时，空格实际上意味着什么。 $("#Hide All Images") 表示在 ID 为 Hide 的东西中的 <All> 标签内找到我的 <Images> 标签。

【讨论】：

...或任何其他非空白字符
不要忘记在 jQuery 选择器上也更改它们！
Phil，没有运气改变......我想知道我是否“错误编码”了一些东西。如果有人工作，我会很高兴。我至少可以查明哪里出错了。
您是否更改了 ID 和选择器中的空格？
@DamienBlack，是的。我认为问题可能出在 jQuery 链接上。我选择了谷歌的CDN，但现在我将使用下载的版本来查看是否有任何变化。

【解决方案2】：

你需要关闭你的图片元素

<img class="photo" src="photo_one.jpg" alt="one" />

元素名称不应包含空格

<button id="Hide-All-Images">Hide All Images</button>

$('#Hide-All-Images').click(function(){
  $("img").hide("fast");  
});

固定here

【讨论】：

不错！谢谢你。我也可以让它在 JSFiddle 上运行，但它仍然无法在我的页面上运行。
我可以通过将 jQuery 从 google 版本更新到静态版本来在我的页面上修复它。如何让照片左移或右移？
不确定我是否理解您通过转移它们来实现的目标。你在寻找这样的东西吗？ stackoverflow.com/questions/4229422/jquery-slideright-effect
我只是想让它移过一个。每次按左移按钮，最后一个图像都会回到右侧的开头，每次按右移按钮，它都会做相反的事情。除了没有隐藏任何东西之外，它几乎就像一个旋转木马。
我想通了！！！您必须对第一个和最后一个图像使用 .detach() 和 .insertBefore() 或 .insertAfter()。非常感谢您的帮助！！