Javascript 以下切换/poptext不'；行不通_Javascript_Php_Jquery_Html_Css

Javascript 以下切换/poptext不'；行不通

javascript php jquery html css

Javascript 以下切换/poptext不'；行不通,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,我已经创建了一个poptext/切换菜单。所有数据均从数据库表“jobshiring”中检索，该表有两列，分别为“job”和“description”。页面上显示的第一个数据工作正常。示例：Job1（单击时，将显示说明）。但是除了Job1之外，下面的作业是不可点击的，简而言之，切换功能不起作用。我试图修复脚本，但我对javascript没有太多知识。我需要修理哪一部分( HTML/PHP/SCRIPT： <script src="https://ajax.googleapis.com/aj

我已经创建了一个poptext/切换菜单。所有数据均从数据库表“jobshiring”中检索，该表有两列，分别为“job”和“description”。页面上显示的第一个数据工作正常。示例：Job1（单击时，将显示说明）。但是除了Job1之外，下面的作业是不可点击的，简而言之，切换功能不起作用。我试图修复脚本，但我对javascript没有太多知识。我需要修理哪一部分(

HTML/PHP/SCRIPT：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


<script> 
    document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></' + 'script>');
    window.addEventListener('load', function() {
    $('#poptext').click(function() {
    $('#poptext').toggleClass('highlight');
    $('#box').animate({
         height: 'toggle',
         opacity: 'toggle',
         width: 'toggle'
         }, 500);
      });
   })
</script>


<body>


<?php
$result = mysql_query("SELECT * FROM jobshiring");

                    while($row = mysql_fetch_array($result)){
                    $job = $row['job'];
                    $description = $row['description'];

?>
    <div id="toggle">
      <div id="poptext"><?php echo $job; ?></div>
        <div id="box">
            <p> <?php echo $description ?>  </p>
        </div>
    </div>
    <?php } ?>


PAGE SOURCE:
    <div id="toggle">
      <div id="poptext">Web Developer</div>
        <div id="box">
            <p>     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et tempus arcu, ac ultrices enim. Etiam dapibus ante at feugiat condimentum. Integer ut varius turpis. Quisque lacus tortor, consequat eu ante in, pharetra lobortis ipsum. Mauris quis lectus maximus, sollicitudin odio non, posuere nisl. Nunc hendrerit lectus sed mauris aliquet, ut porttitor odio euismod. Praesent ut felis facilisis odio laoreet vulputate at eget sem. Nullam ut purus at justo pulvinar molestie. Suspendisse et massa sed ex sodales efficitur. Nam rutrum sem justo, non facilisis turpis maximus at. Sed tincidunt nibh vel dolor imperdiet, nec sollicitudin dolor auctor. Suspendisse pharetra sem tellus, et rutrum massa scelerisque non. Pellentesque luctus quam libero. Maecenas suscipit sem eu urna ornare tristique.  </p>
        </div>
    </div>
            <div id="toggle">
      <div id="poptext">Systems Analyst</div>
        <div id="box">
            <p>     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et tempus arcu, ac ultrices enim. Etiam dapibus ante at feugiat condimentum. Integer ut varius turpis. Quisque lacus tortor, consequat eu ante in, pharetra lobortis ipsum. Mauris quis lectus maximus, sollicitudin odio non, posuere nisl. Nunc hendrerit lectus sed mauris aliquet, ut porttitor odio euismod. Praesent ut felis facilisis odio laoreet vulputate at eget sem. Nullam ut purus at justo pulvinar molestie. Suspendisse et massa sed ex sodales efficitur. Nam rutrum sem justo, non facilisis turpis maximus at. Sed tincidunt nibh vel dolor imperdiet, nec sollicitudin dolor auctor. Suspendisse pharetra sem tellus, et rutrum massa scelerisque non. Pellentesque luctus quam libero. Maecenas suscipit sem eu urna ornare tristique.  </p>
        </div>
    </div>
            <div id="toggle">
      <div id="poptext">Business Analysts</div>
        <div id="box">
            <p>       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et tempus arcu, ac ultrices enim. Etiam dapibus ante at feugiat condimentum. Integer ut varius turpis. Quisque lacus tortor, consequat eu ante in, pharetra lobortis ipsum. Mauris quis lectus maximus, sollicitudin odio non, posuere nisl. Nunc hendrerit lectus sed mauris aliquet, ut porttitor odio euismod. Praesent ut felis facilisis odio laoreet vulputate at eget sem. Nullam ut purus at justo pulvinar molestie. Suspendisse et massa sed ex sodales efficitur. Nam rutrum sem justo, non facilisis turpis maximus at. Sed tincidunt nibh vel dolor imperdiet, nec sollicitudin dolor auctor. Suspendisse pharetra sem tellus, et rutrum massa scelerisque non. Pellentesque luctus quam libero. Maecenas suscipit sem eu urna ornare tristique.     </p>
        </div>
    </div>
            <div id="toggle">
      <div id="poptext">asdasf</div>
        <div id="box">
            <p>      asfsaf  </p>
        </div>
    </div>
            <div id="toggle">
      <div id="poptext">asda</div>
        <div id="box">
            <p>        sasdsa asdas  </p>
        </div>
    </div>


文件。写（“”）；
addEventListener（'load'，function（））{
$（'#poptext'）。单击（函数（）{
$（'poptext'）。toggleClass（'highlight'）；
$（“#框”）。设置动画({
高度：“切换”，
不透明度：“切换”，
宽度：“切换”
}, 500);
});
})

页面来源：
网络开发者
Lorem ipsum dolor sit amet，consequeat eu ante in，pharetra lobortis ipsum。Fusce et tempus arcu，acultrices enim。Etiam dapibus ante at feugia调味品。Integer ut varius turpis。Quisque lacus tortor，consequest eu ante in，pharetra lobortis ipsum。Mauris quis lectus maximus，sollicitudin odio non，posuere nisl。nuc hendrerit lectus sed Mauris aliquet，这是一个很好的例子。猫咪的便利性和老猫的便利性在eget sem上得到了验证。purus的便利性和purus的便利性在pulvinar molestie上得到了验证。Suspendisse和massa-sed-ex-sodales的有效性。Nam-rutrum sem justo，non-facilisis turpis maximus在Nib vel dolor Diet，nec sollicitudin dolor auctor。Suspendisse pharetra sem tellus和rutr这是权杖，不是自由女神的佩伦特斯，是自由女神的前辈
系统分析员
Lorem ipsum dolor sit amet，consequeat eu ante in，pharetra lobortis ipsum。Fusce et tempus arcu，acultrices enim。Etiam dapibus ante at feugia调味品。Integer ut varius turpis。Quisque lacus tortor，consequest eu ante in，pharetra lobortis ipsum。Mauris quis lectus maximus，sollicitudin odio non，posuere nisl。nuc hendrerit lectus sed Mauris aliquet，这是一个很好的例子。猫咪的便利性和老猫的便利性在eget sem上得到了验证。purus的便利性和purus的便利性在pulvinar molestie上得到了验证。Suspendisse和massa-sed-ex-sodales的有效性。Nam-rutrum sem justo，non-facilisis turpis maximus在Nib vel dolor Diet，nec sollicitudin dolor auctor。Suspendisse pharetra sem tellus和rutr这是权杖，不是自由女神的佩伦特斯，是自由女神的前辈
业务分析师
奥雷姆·伊普苏姆·多洛·塞特，一位杰出的献祭者。他是一位伟大的献祭者。他在封建调味品上的献祭。他是一位伟大的献祭者。他是一位伟大的献祭者。他是一位伟大的献祭者。他是一位伟大的献祭者t、 在eget sem上，猫咪的面部表情和老猫的面部表情都很明显。在pulvinar molestie上，猫咪的面部表情和面部表情都很明显。Suspendisse和massa-sed-ex-sodales efficitiur。Nam rutrum sem justo，非面部表情的turpis maximus在tincidunt Nib vel dolor Diety，nec sollicitudin dolor auctor。Suspendisse pharetra sem tellus，et，等等真正的权杖不是。佩伦特斯·卢克图斯是自由的。前教士是一位伟大的教士
asdasf
asfsaf
阿斯达
萨斯达斯酒店

没有必要有这么多不同版本的jQuery，只要有最新版本就行了

元素的ID必须是唯一的，如果要使用公共属性对多个元素进行分组，请使用公共类而不是ID。ID选择器将仅获取具有给定ID的第一个元素，这就是在您的情况下仅第一个元素有效的原因

同样在事件处理程序内部，您需要处理与单击的元素相关的元素，因此您可以在处理程序内部使用

this

引用单击的

poptext

元素并切换其类，然后使用相同的引用查找

框

元素，如下所示

所以

jQuery（函数（$）{
$（'.poptext'）。单击（函数（）{
$（this.toggleClass（'highlight'）；
$（this）.next（'.box'）.animate({
高度：“切换”，
不透明度：“切换”，
宽度：“切换”
}, 500);
});
})

.toggle{
位置：相对位置；
底部：0px；
宽度：240px；
保证金：0自动；
边缘底部：10px；
}
.盒子{
保证金：0；
位置：相对位置；
边缘底部：10px；
边缘顶部：10px；
边界半径：10px；
文本阴影：0 1px 2px#000；
背景色：#644d52；
显示：无；
不透明度：.9；
宽度：100%；
}
.方框p{
保证金：0；
填充：5px20px 15px 20px；
文本对齐：左对齐；
颜色：#FFF；
}
.poptext{
宽度：100%；
高度：18px；
字体大小：14px；
文本对齐：左对齐；
左侧填充：23px；
溢出：隐藏；
光标：指针；
保证金：0自动；
边界半径：10px；
}
.poptext.highlight{
背景：棕色；
}


文本1
方框1
文本2
方框2
文本3
方框3

你能分享生成的html吗？为什么你有3个不同版本的jQueryID元素必须是唯一的..使用class而不是从哪里获得生成的html？而且，你也是刚才帮助我解决这个问题的人。我添加了一些代码，以便数据来自数据库。希望你也能帮助我解决这个问题。w我需要在我的jQuery上删除哪些内容？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


<script> 
    document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></' + 'script>');
    window.addEventListener('load', function() {
    $('#poptext').click(function() {
    $('#poptext').toggleClass('highlight');
    $('#box').animate({
         height: 'toggle',
         opacity: 'toggle',
         width: 'toggle'
         }, 500);
      });
   })
</script>


<body>


<?php
$result = mysql_query("SELECT * FROM jobshiring");

                    while($row = mysql_fetch_array($result)){
                    $job = $row['job'];
                    $description = $row['description'];

?>
    <div id="toggle">
      <div id="poptext"><?php echo $job; ?></div>
        <div id="box">
            <p> <?php echo $description ?>  </p>
        </div>
    </div>
    <?php } ?>


PAGE SOURCE:
    <div id="toggle">
      <div id="poptext">Web Developer</div>
        <div id="box">
            <p>     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et tempus arcu, ac ultrices enim. Etiam dapibus ante at feugiat condimentum. Integer ut varius turpis. Quisque lacus tortor, consequat eu ante in, pharetra lobortis ipsum. Mauris quis lectus maximus, sollicitudin odio non, posuere nisl. Nunc hendrerit lectus sed mauris aliquet, ut porttitor odio euismod. Praesent ut felis facilisis odio laoreet vulputate at eget sem. Nullam ut purus at justo pulvinar molestie. Suspendisse et massa sed ex sodales efficitur. Nam rutrum sem justo, non facilisis turpis maximus at. Sed tincidunt nibh vel dolor imperdiet, nec sollicitudin dolor auctor. Suspendisse pharetra sem tellus, et rutrum massa scelerisque non. Pellentesque luctus quam libero. Maecenas suscipit sem eu urna ornare tristique.  </p>
        </div>
    </div>
            <div id="toggle">
      <div id="poptext">Systems Analyst</div>
        <div id="box">
            <p>     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et tempus arcu, ac ultrices enim. Etiam dapibus ante at feugiat condimentum. Integer ut varius turpis. Quisque lacus tortor, consequat eu ante in, pharetra lobortis ipsum. Mauris quis lectus maximus, sollicitudin odio non, posuere nisl. Nunc hendrerit lectus sed mauris aliquet, ut porttitor odio euismod. Praesent ut felis facilisis odio laoreet vulputate at eget sem. Nullam ut purus at justo pulvinar molestie. Suspendisse et massa sed ex sodales efficitur. Nam rutrum sem justo, non facilisis turpis maximus at. Sed tincidunt nibh vel dolor imperdiet, nec sollicitudin dolor auctor. Suspendisse pharetra sem tellus, et rutrum massa scelerisque non. Pellentesque luctus quam libero. Maecenas suscipit sem eu urna ornare tristique.  </p>
        </div>
    </div>
            <div id="toggle">
      <div id="poptext">Business Analysts</div>
        <div id="box">
            <p>       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et tempus arcu, ac ultrices enim. Etiam dapibus ante at feugiat condimentum. Integer ut varius turpis. Quisque lacus tortor, consequat eu ante in, pharetra lobortis ipsum. Mauris quis lectus maximus, sollicitudin odio non, posuere nisl. Nunc hendrerit lectus sed mauris aliquet, ut porttitor odio euismod. Praesent ut felis facilisis odio laoreet vulputate at eget sem. Nullam ut purus at justo pulvinar molestie. Suspendisse et massa sed ex sodales efficitur. Nam rutrum sem justo, non facilisis turpis maximus at. Sed tincidunt nibh vel dolor imperdiet, nec sollicitudin dolor auctor. Suspendisse pharetra sem tellus, et rutrum massa scelerisque non. Pellentesque luctus quam libero. Maecenas suscipit sem eu urna ornare tristique.     </p>
        </div>
    </div>
            <div id="toggle">
      <div id="poptext">asdasf</div>
        <div id="box">
            <p>      asfsaf  </p>
        </div>
    </div>
            <div id="toggle">
      <div id="poptext">asda</div>
        <div id="box">
            <p>        sasdsa asdas  </p>
        </div>
    </div>