当我使用切换点击此图片时，我的文字不会出现和消失

时间：2014-05-01 19:40:34

标签： javascript jquery html

我和其他人一起练习我的javascript试图基本上让我的图片下面的文字出现并在我点击图片时消失。我一直在使用从JQuery切换，但没有任何运气让我的文本消失或出现。我错过了什么？或者我应该添加什么！非常感谢...以下是代码：

<link rel="stylesheet" type="text/css" href="something_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">

</head>

 <script>
 $(document).ready(function(){
   $("#col1").click(function(){
        $('p').toggle();
   });
 });
 </script>

<body> 
<div id="wrapper">
<div id="outerWrapper">
 <div id="header"><a href="https:www.medium.com"><img src="http://ncadpostgraduate.com/images/site/header.gif" alt="NCAD Postgraduate Study" width="366" height="66" /></a></div> 
  <div id="topNavigation">

  </div></div>
  </div><div id="wrapper-3">
  <div id="outerWrapper">
  <div id="contentWrapperhome">
    <div id="col1"><a><img src="image/DSC04580.JPG" alt="NCAD Entrance" width="251" height="251" /></a>
<div id="text">
        <h1><a href="http://ncadpostgraduate.com/index.php/postgraduate">Postgraduate Study</a></h1>
        <p><a href="http://ncadpostgraduate.com/index.php/postgraduate">This is me isn't it?</a></p>
</div>
    </div>    
    <div id="col1"><a><img src="image/DSC04580.JPG" alt="Prospectus Image" width="251" height="251" />
     </a><div id="text">
      <h1><a>Prospectus</a></h1>
      <p><a>Read the full Postgraduate prospectus for 2009/2010 online, including details regarding Application deadlines and procedures. The Prospectus is also available as a PDF download.</a></p>
    </div></div>

    <div id="col1"><a><img src="image/DSC04580.JPG" alt="Graduate Work Image" width="251" height="251">
      </a><div id="text">

3 个答案:

答案 0 :(得分：1)

每个ID不应该有多个元素，有几个元素会id=col1更改为类，或者让它们成为初学者。使用类的好处是可以将一个侦听器附加到许多元素。然后通过限制您的选择器来切换p或this下的<div id="header"><a href="https:www.medium.com"><img src="http://ncadpostgraduate.com/images/site/header.gif" alt="NCAD Postgraduate Study" width="366" height="66" /></a> </div> <div id="topNavigation"></div> </div> </div> <div id="wrapper-3"> <div id="outerWrapper"> <div id="contentWrapperhome"> <div class="clickToHideClass"><a><img src="image/DSC04580.JPG" alt="NCAD Entrance" width="251" height="251" /></a> <div id="text"> <h1><a href="http://ncadpostgraduate.com/index.php/postgraduate">Postgraduate Study</a></h1> <p><a href="http://ncadpostgraduate.com/index.php/postgraduate">This is me isn't it?</a> </p> </div> </div> <div class="clickToHideClass"><a><img src="image/DSC04580.JPG" alt="Prospectus Image" width="251" height="251" /> </a> <div id="text"> <h1><a>Prospectus</a></h1> <p><a>Read the full Postgraduate prospectus for 2009/2010 online, including details regarding Application deadlines and procedures. The Prospectus is also available as a PDF download.</a> </p> </div> </div> <div class="clickToHideClass"><a><img src="image/DSC04580.JPG" alt="Graduate Work Image" width="251" height="251"> </a> <div id="text"> <h1><a>Prospectus</a></h1> <p><a>Read the full Postgraduate prospectus for 2009/2010 online, including details regarding Application deadlines and procedures. The Prospectus is also available as a PDF download.</a> </p> </div> </div> 。

HTML：

 $(document).ready(function () {
     $(".clickToHideClass").click(function () {
         // now toggle only the 'p' under 'this'
         $('p', $(this)).toggle();
     });
 });

JAVASCRIPT：

{{1}}

并在此处进行演示：http://jsfiddle.net/EuJB6/

答案 1 :(得分：0)

关闭脚本标记，使其必须正常工作

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#col1").click(function () {
                    $('p').toggle();
                });
            });
    </script>
</head>

<body>
    <div id="wrapper">
        <div id="outerWrapper">
            <div id="header"><a href="https:www.medium.com"><img src="http://ncadpostgraduate.com/images/site/header.gif" alt="NCAD Postgraduate Study" width="366" height="66" /></a></div>
            <div id="topNavigation">

            </div>
        </div>
    </div><div id="wrapper-3">
    <div id="outerWrapper">
        <div id="contentWrapperhome">
            <div id="col1">
                <a><img src="image/DSC04580.JPG" alt="NCAD Entrance" width="251" height="251" /></a>
                <div id="text">
                    <h1><a href="http://ncadpostgraduate.com/index.php/postgraduate">Postgraduate Study</a></h1>
                    <p><a href="http://ncadpostgraduate.com/index.php/postgraduate">This is me isn't it?</a></p>
                </div>
            </div>
            <div id="col1">
                <a>
                    <img src="image/DSC04580.JPG" alt="Prospectus Image" width="251" height="251" />
                </a><div id="text">
                    <h1><a>Prospectus</a></h1>
                    <p><a>Read the full Postgraduate prospectus for 2009/2010 online, including details regarding Application deadlines and procedures. The Prospectus is also available as a PDF download.</a></p>
                </div>
            </div>

            <div id="col1">
                <a>
                    <img src="image/DSC04580.JPG" alt="Graduate Work Image" width="251" height="251">
                </a><div id="text">
                </div>
            </div>
        </div>
    </div>
    </div>
</body>
</html>

答案 2 :(得分：0)

首先，您的HTML需要整理。确保关闭</head>并将您的Javascript放入<head>。即

<head>
<link rel="stylesheet" type="text/css" href="something_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

 <script>
 $(document).ready(function(){
  // do summit
 });
</script>

<body> html也需要整理，即：

<div class="col"><img src="image/DSC04580.JPG" alt="Prospectus Image" width="251" height="251" /></div>
     <div class="text">
      <h1>Prospectus</h1>
      <p>Read the full Postgraduate prospectus for 2009/2010 online, including details regarding Application deadlines and procedures. The Prospectus is also available as a PDF download.</p>
    </div>

<div class="col"><img src="image/DSC04580.JPG" alt="Graduate Work Image" width="251" height="251"></div>
  <div class="text">
  <h1>Other text</h1>
  <p>Read the full Postgraduate prospectus for 2009/2010 online, including details regarding Application deadlines and procedures. The Prospectus is also available as a PDF download.</p>
    </div>

请注意ID如何替换为类。 ID应该是唯一的。最后，Javascript需要修改如下：

 <script>
 $(document).ready(function(){
   $('.col').click(function(){
        $(this).next('.text').toggle();
   });
 });
</script>

现在使用类col和text，并使用$(this).next()仅切换下一个类text元素的出现。

相关问题
最新问题