文章/答案/技术大牛

发布

社区首页 >问答首页 >当我使用切换功能单击此图片时，我的文本不会显示和消失

问当我使用切换功能单击此图片时，我的文本不会显示和消失
EN

Stack Overflow用户

提问于 2014-05-02 03:40:34

回答 3查看 45关注 0票数 0

我正在和其他人练习我的javascript，试图让我的图片下面的文字在我点击图片时出现和消失。我一直在使用JQuery中的toggle，但在让我的文本消失或出现方面没有任何运气。我遗漏了什么？或者我应该添加什么！谢谢，lots...and，下面是代码：

<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">

javascript

jquery

html

回答 3

Stack Overflow用户

发布于 2014-05-02 03:50:17

对于每个ID，您不应该有超过一个元素，您可以使用id=col1将多个元素更改为类或将它们设置为单独的元素。使用类的好处是您可以将一个侦听器附加到许多元素。然后通过限制您的选择器来切换该选项下的p或this。

HTML：

<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>

JAVASCRIPT：

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

这里是工作演示：http://jsfiddle.net/EuJB6/

票数 1

Stack Overflow用户

发布于 2014-05-02 03:52:07

关闭脚本标记，这样它才能正常工作

<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>

票数 0

Stack Overflow用户

发布于 2014-05-02 04:06:25

首先，您的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是如何替换为class的。ID应该是唯一的。最后，Javascript需要修改如下：

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23415260

复制

相似问题

问当我使用切换功能单击此图片时，我的文本不会显示和消失
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我使用切换功能单击此图片时，我的文本不会显示和消失EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我使用切换功能单击此图片时，我的文本不会显示和消失
EN