当前位置：文江博客话题详情

php while echo 循环中下拉 div 框的 Jquery 解决方案

发布于 2024-10-28 07:41:56 字数 3222 浏览 5 评论 0原文

我陷入了 php echo while 循环中下拉 div 的问题。

我试图用 jquery 切换我的隐藏 div，但问题是 .next() 没有在每个循环中获取隐藏的敌人。

我知道如何使用 jquery 切换、隐藏和做其他一些事情，但只有当 div 是特定的或只有几个时我才擅长。

我正在尝试 .(next) jquery 代码，它只适用于简单的 div（一个在另一个旁边）...但是回显的 div 在其他 div 中有一些子 div，所以 .(next) 不会得到我隐藏的 div 并且我什么也得不到！

我找到了一个使用简单的 javascript 并触发 onClick 事件的解决方案，但我想将其更改回 jquery，以便我可以在其上添加 .slideToggle("slow") 效果。

我尝试使用 .attr(OnClick) 获取属性，然后使用它来切换目标 div（隐藏的 div），但它只是没有发生......！！！

我问是否有人可以给我一个页面中多拉 div 的永久解决方案...... 并将其改为一个按钮，而不是隐藏/显示两个按钮。

供参考： 1 对于我回显的每个循环，子 div id 都是不同的，以便 jquery 可以处理所需的 div 2.我的php部分没有任何问题... 3.我搜索了很多地方，但我找到的唯一解决方案是 .next()

这是我正在试验的 javascript 中的简单代码：该代码有 2 个回显循环，所以您知道它是如何的，就像这样，因为我只在记事本中使用它并快速设置它的样式。您可以粘贴到记事本中并理解我的意思。通常我应该有 10 个循环。。非常感谢:-)祝你有美好的一天！

<html>
<head>
<script type="text/javascript"    src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.`enter code here`/jquery.min.js"></script>
<script type="text/javascript">

      function showHideContent(id, show)
      {
        var elem = document.getElementById(id);
        if (elem) 
        {
          if (show) 
          {
            elem.style.display = 'block';
            elem.style.visibility = 'visible';
          } 
          else
          {
            elem.style.display = 'none';
            elem.style.visibility = 'hidden';
          }
        }
      }          
</script></head><body>

      <div id='blockinfo'style="border:1px solid black; width:500px">

      <div style='float:left;border:1px solid black;'width='70px'>Some Image</div>
      <span>some info</span><br>

      <div class='blockinfo1' style='  margin-top:-10px;'>

      <button style='border:1px solid black;   letter-spacing:1px; margin-left:100px;''
       onclick="showHideContent('hiddendiv1', false);">hide
      </button>

      <button style='border:1px solid black; letter-spacing:1px; margin-left:100px;'
       onclick="showHideContent('hiddendiv1', true);">show
      </button>
      </div>
       <br>

      <div id='hiddendiv1'style='background-color:black; display:none; width:500px; height:200px;'>
      <h1 style="color:white;"> more info </h1></div>



      <div id='blockinfo'style="border:1px solid black; width:500px">

      <div style='float:left;border:1px solid black;'width='70px'>Some Image</div>
      <span>some info</span><br>

      <div class='blockinfo2' style='  margin-top:-10px;'>

      <button style='border:1px solid black;   letter-spacing:1px; margin-left:100px;''
       onclick="showHideContent('hiddendiv2', false);">hide
      </button>

      <button style='border:1px solid black; letter-spacing:1px; margin-left:100px;'
       onclick="showHideContent('hiddendiv2', true);">show
      </button>
      </div>
       <br>

      <div id='hiddendiv2'style='background-color:black; display:none; width:500px; height:200px;'>
      <h1 style="color:white;"> more info </h1>
      </div>

</body><html>

原文

I am stuck in a problem with the dropdown div from my php echo while loop.

I am trying to toggle my hidden divs with jquery but the problem is that the .next() doesnt get the hidden foe each loop.

I know how to toggle , hide , and do some other things with jquery but i am only good when the divs are spesific or are just a few.

I was experimenting with .(next) jquery code and it worked only for simple divs(one beside the other)...But the echoed divs have some children divs inside of others so the .(next) doesnt get my hidden div and i dont get nothing!

I found a solution with simple javascript and triggering the onClick event but i want to change it back to jquery so i can add a .slideToggle("slow") effect on it.

I have tryied getting the attributes using .attr(OnClick) and then using it to toggle the targeted div which is the hidden one but it just doesnt happen...!!!

I am asking if someone can give me a permianent solution for multipull divs in a page...
and instead of two buttons hide/show to change it back to one button.

FYI :
1 the children div ids are different for every loop that i echo so that jquery can handle the desired div
2. i dont have any problems in the php part...
3.I searched a lot of places but the only solution i found was the .next()

And here is the simple code in javascript that i am experimenting on:
The code has 2 echoed loops so you know about how it is and its like this because i used it only in notepad and quick styled it..You can paste in your notepad and understand what i mean.Normaly i should have 10 loops...
Thanks a lot :-) Have a nice day !

<html>
<head>
<script type="text/javascript"    src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.`enter code here`/jquery.min.js"></script>
<script type="text/javascript">

      function showHideContent(id, show)
      {
        var elem = document.getElementById(id);
        if (elem) 
        {
          if (show) 
          {
            elem.style.display = 'block';
            elem.style.visibility = 'visible';
          } 
          else
          {
            elem.style.display = 'none';
            elem.style.visibility = 'hidden';
          }
        }
      }          
</script></head><body>

      <div id='blockinfo'style="border:1px solid black; width:500px">

      <div style='float:left;border:1px solid black;'width='70px'>Some Image</div>
      <span>some info</span><br>

      <div class='blockinfo1' style='  margin-top:-10px;'>

      <button style='border:1px solid black;   letter-spacing:1px; margin-left:100px;''
       onclick="showHideContent('hiddendiv1', false);">hide
      </button>

      <button style='border:1px solid black; letter-spacing:1px; margin-left:100px;'
       onclick="showHideContent('hiddendiv1', true);">show
      </button>
      </div>
       <br>

      <div id='hiddendiv1'style='background-color:black; display:none; width:500px; height:200px;'>
      <h1 style="color:white;"> more info </h1></div>



      <div id='blockinfo'style="border:1px solid black; width:500px">

      <div style='float:left;border:1px solid black;'width='70px'>Some Image</div>
      <span>some info</span><br>

      <div class='blockinfo2' style='  margin-top:-10px;'>

      <button style='border:1px solid black;   letter-spacing:1px; margin-left:100px;''
       onclick="showHideContent('hiddendiv2', false);">hide
      </button>

      <button style='border:1px solid black; letter-spacing:1px; margin-left:100px;'
       onclick="showHideContent('hiddendiv2', true);">show
      </button>
      </div>
       <br>

      <div id='hiddendiv2'style='background-color:black; display:none; width:500px; height:200px;'>
      <h1 style="color:white;"> more info </h1>
      </div>

</body><html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

洋洋洒洒 2024-11-04 07:41:56

我注意到的第一个问题是您的包装 div 具有相同的 ID。将其更改为 class="blockinfo"。也给你的隐藏的 div 一个特定的类。

$(document).ready(function(){
  $('.blockinfo button').click(function() {
    $(this).next('.hidden').toggle();
  });
});

The first issue I notice is that your wrapper divs have the same ID. Change this to class="blockinfo". Also give your hidden divs a specific class as well.

$(document).ready(function(){
  $('.blockinfo button').click(function() {
    $(this).next('.hidden').toggle();
  });
});

回复收藏 0 原文

同尘 2024-11-04 07:41:56

我真的认为我能给你的最好建议是看看 jQuery UI Accordion 即使我不'我认为它非常合适。您确实需要将样式分成 CSS 并考虑制作您的 HTML 兼容

祝你好运

回复收藏 0 原文

~没有更多了~

关于作者

梦里人

暂无简介

文章

27 人气

关注发私信

友情链接

文江博客

php while echo 循环中下拉 div 框的 Jquery 解决方案

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

十二

飞烟轻若梦

OPleyuhuo

wxb0109

旧城空念

-小熊_

友情链接

php while echo 循环中下拉 div 框的 Jquery 解决方案

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

十二

飞烟轻若梦

OPleyuhuo

wxb0109

旧城空念

-小熊_

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。