Question

我试图隐藏，显示，移动图像，但我无法做任何事情。我看到按钮但没有发生任何事情。 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>

Answer 1

从类和ID中删除空格，用下划线（或连字符或其他任何内容）替换它们。

例如：

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

和

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

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

Answer 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

我无法使jQuery工作。我错过了什么？

2 个答案: