jQuery代码的问题

Question

jQuery代码的问题

另一个jQuery问题......我已经尝试了几次使用"class"和"id"元素,但我无法做到这一点.我希望stackoverflow上的大脑可以帮助你!

我遇到的问题是当我打开页面时,所有元素都被关闭了.当我点击一个链接时,所有链接都会打开.我相信它正确关闭问题是,当我打开第一个链接所有项目打开.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0     Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bid Items</title>
<link href="bid.css" rel="stylesheet" type="text/css" />
<script src="jquery/js/jquery.js" type="text/javascript"></script>

<script type="text/javascript">


  $(document).ready(function(){ 
  $('#showhideconent').hide(); 
  $('a').click(function(){ 
  $('#showhideconent').show('slow'); 

}); 

 $('a#close').click(function(){ 
        $('#showhideconent').hide('slow'); 
}) 

}); 

 $(document).ready(function(){ 
 $('#showhideconent2').hide(); 
 $('a').click(function(){ 
 $('#showhideconent2').show('slow'); 

}); 

 $('a#close2').click(function(){ 
    $('#showhideconent2').hide('slow'); 
}) 

});  

  $(document).ready(function(){ 
  $('#showhideconent3').hide(); 
  $('a').click(function(){ 
 $('#showhideconent3').show('slow'); 

}); 

 $('a#close3').click(function(){ 
    $('#showhideconent3').hide('slow'); 
}) 

}); 
  $(document).ready(function(){ 
  $('#showhideconent4').hide(); 
  $('a').click(function(){ 
  $('#showhideconent4').show('slow'); 

}); 

 $('a#close4').click(function(){ 
        $('#showhideconent4').hide('slow'); 
}) 

}); 


</script>

</head>

<body class="oneColElsCtr" onload="MM_preloadImages('Assignment4b.jpg')">

<div id="container">
<div id="mainContent">

    <h1>Bid Page</h1>
<h1>Coke Memorbila</h1>




<a href="#" id="click">Amber Bottle 1914</a>
<div id="box" align="center">
<div id="showhideconent">
<p><a href="coke/Amber1914.shtml"><img src="amber1914.jpg" width="200" height="200"    alt="Amber Coke" /></a></p>
<p><a href="#" id="close">Close</a> </p>

</div>
</div>


<a href="#" id="click">Amber Bottle 1915</a>
<div id="box" align="center">
<div id="showhideconent2">
<p><a href="coke/Amber1915.shtml"><img src="coke/Amber1914.shtml" width="200" height="200" alt="Amber Bottle 1915" /></a></p>
<p><a href="#" id="close2">Close</a> </p>


</div>
</div>




<a href="#" id="click">Green 1929</a>
<div id="box" align="center">
<div id="showhideconent3">
<p><a href="coke/green1929.shtml"><img src="green1929.jpg" width="200" height="200" alt="Green 1929" /></a></p>
<p><a href="#" id="close3">Close</a> </p>

</div>
</div>


<a href="#" id="click">1970s Cans</a>
<div id="box" align="center">
<div id="showhideconent4">
<p><a href="coke/tincans.shtml"><img src="coke_tincan.jpg" width="200" height="200" alt="Tin Cans" /></a></p>
<p><a href="#" id="close4">Close</a> </p>


</div>
</div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

use*_*716 5

迈克尔,当你问起这件事时,请看我早些时候的回答.

我重写了你的HTML和jQuery代码.

show hide jquery的问题

~~你不再重复使用ID是好的,但是~~当你像你一样重复一致时,你不需要ID来分配事件处理程序.

编辑:

没有冒犯,但听起来你只需要拿一本关于jQuery的书并阅读几章.当你有一点指导时,你会惊讶于jQuery是多么容易理解.

我不知道任何jQuery,但在阅读了一些学习jQuery后,我对基本概念有了很好的把握.我花了几个小时的时间.

编辑:

你可以在这看到重复.

<a href="#" class="click">Green 1929</a>
<div class="box" align="center">
    <div class="showhideconent">
        <p><a href="coke/green1929.shtml"><img src="green1929.jpg" width="200" height="200" alt="Green 1929" /></a></p>
        <p><a href="#" class="close">Close</a> </p>
    </div>
</div>

<a href="#" class="click">1970s Cans</a>
<div class="box" align="center">
    <div class="showhideconent">
        <p><a href="coke/tincans.shtml"><img src="coke_tincan.jpg" width="200" height="200" alt="Tin Cans" /></a></p>
        <p><a href="#" class="close">Close</a> </p>
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

首先,我改变了a元素,以便它们class="click"代替id="click".

他们显然打算扮演类似的角色,但在不同的内容上.让我们说有20个这样的部分与一个click类.我可以一次为所有二十个分配一个事件处理程序:

$('.click').click(function() {
    // Do something.
});

Run Code Online (Sandbox Code Playgroud)

但是,当然,我们希望每个人只对与之相关的内容采取行动.此外,我们需要确保我们正在使用被单击的正确的一个.为此,我们使用this关键字.它指的是接收事件的元素.

$('.click').click(function() {
    $(this) // Places the element that was clicked in a jQuery object.
    // Do something.
});

Run Code Online (Sandbox Code Playgroud)

那么现在我们做什么？好吧,看起来你想用它来显示内容.因此,我们需要找到该链接的相关内容并进行显示.

$('.click').click(function() {
    $(this).next().find('.showhidecontent').show();
    return false;  // This return statement can be used to disable the default behavior of the link. Sometimes necessary
});

Run Code Online (Sandbox Code Playgroud)

这段代码几乎解释了自己.$(this)(我们单击的元素)抓取next()元素(带有类.box的元素)然后在其中搜索具有类的元素.showhidecontent,然后显示它.

您可以使用.close按钮执行类似操作.它更容易,因为它在.showhidecontent元素内部.

$('.close').click(function() {
    $(this).closest('.showhidecontent').hide();
    return false;  // This return statement can be used to disable the default behavior of the link. Sometimes necessary
});

Run Code Online (Sandbox Code Playgroud)

这将函数分配给具有.close类的所有元素.单击时,单击的那个closest()用类搜索父级.showhidecontent,然后隐藏它.

编辑:

要将所有内容组合在一起,只要您修复了类,此代码就会将正确的事件分配给所有重复的部分.(你几乎可以放弃ID)

$(document).ready(function() {
    $('.showhidecontent').hide();  // Hide all the showhidecontent class elements

        // Assign click event handler to all .click class elements
    $('.click').click(function() {
        $(this).next().find('.showhidecontent').show();
        return false;  // This return statement can be used to disable the default behavior of the link. Sometimes necessary
    });

        // Assign click event handler to all .close class elements
    $('.close').click(function() {
        $(this).closest('.showhidecontent').hide();
        return false;  // This return statement can be used to disable the default behavior of the link. Sometimes necessary
    });
});

Run Code Online (Sandbox Code Playgroud)

希望这可以帮助.jQuery的设计非常易读,但你需要先学习基础知识(就像你做的任何事情一样).

归档时间：	15 年，7 月前
查看次数：	85 次
最近记录：	11 年，7 月前