显示隐藏JS div css

-2

即时通讯熟悉PHP，但在js严重的学习者，我已经尝试了3种方法来实现我的目标，我已经看到了下面使用的方法，似乎是最容易实现的，所以我可以实现我的目标，但由于某种原因，它不起作用。我只包含了不需要的特定函数的必要位，这一切都在基于db中条目的while循环内工作，并与{$ page_trackid}分开以区分每个函数并链接到它。显示隐藏JS div css

我明白'这个'风格的功能可以使用，但正如我所说我是如此新的js我只是试图达到必要之前，我扩展到变得更加复杂。

这里有什么我在做完全错误的东西吗？

干杯

<head> 

    <style> 
     .hidden {display:none;} 
     .visible {display:block;} 

     .subtext_img { 
      width: 100px; height: 100px; padding-top: 10px; padding-right: 10px; float: right; 
     } 

     .subtext { 
      padding-left: 10px; 
     } 
     .arrow_box { padding-left: 100px; position: absolute; z-index: 100; background: #88b7d5; border: 4px solid #c2e1f5; width: 580px; height: 120px;} .arrow_box:after, .arrow_box:before { left: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-color: rgba(136, 183, 213, 0); border-left-color: #88b7d5; border-width: 10px; top: 30%; margin-top: -10px; } .arrow_box:before { border-color: rgba(194, 225, 245, 0); border-left-color: #c2e1f5; border-width: 16px; top: 30%; margin-top: -16px; } 


    </style> 
</head> 
<body> 


    <? 
    $data = mysql_query("SELECT * FROM user_Uploaded_Tracks WHERE username = '$user' ORDER BY datetime DESC") 
      or die(mysql_error()); 

    $page_trackid = '1'; //reset page track id 
    // get a whole bunch of data, track info & user info based on some cross referencing via id 
    while ($info = mysql_fetch_array($data)) { 

     $db_trackid = $info['id']; 
     $username = $info['username']; 

     //data 2 track info based on db track id 
     $data2 = mysql_query("SELECT * FROM user_Uploaded_Tracks WHERE id = '$db_trackid' LIMIT 1") 
       or die(mysql_error()); 

     $info2 = mysql_fetch_array($data2); 


     //data 3 is user profile data based on db track id 
     $data3 = mysql_query("SELECT * FROM users WHERE username = '$username' LIMIT 1") 
       or die(mysql_error()); 

     $info3 = mysql_fetch_array($data3); 

     //data 4 profile image based on user id, track uploader* 
     $data4 = mysql_query("SELECT * FROM user_profile_pic WHERE username = '$username' ORDER BY datetime DESC LIMIT 1") 
       or die(mysql_error()); 

     $info4 = mysql_fetch_array($data4); 

     echo " 
     <script> 
      function showbox(userinfo_{$page_trackid}){ 
       document.getElementById(userinfo_{$page_trackid}).style.visibility='visible'; 
      } 

      function hidestuff(userinfo_{$page_trackid}){ 
       document.getElementById(userinfo_{$page_trackid}).style.visibility='hidden'; 
      } 
     </script> 
     <div id='userinfo_{$page_trackid}' class='arrow_box' style='display: none;'> <img src='" . $info4['Image'] . "' class='subtext_img'> 
      <h2 class='subtext'><a href='http://XXXX/XXX/" . $info2['username'] . "'>" . $info2['username'] . "</a></h2> 
      <p class='subtext'>" . $info3['user_title'] . "</p> 
      <p class='subtext'><a href='" . $info3['website_link'] . "' target='_blank'>" . $info3['website_link'] . "</a> 

      </p> 

     </div>"; 

     echo " 
      <div style='position: absolute; z-index: 1; width: 20px; height: 20px; padding-top: 50px; padding-left: 699px;'> 
       <a href='javascript:showbox_{$page_trackid}()'><img style='height: 20px;' alt='Track stats' src='http://XXXXXX/play1/skin/user-profile2.png' style=''></a> 
      </div>"; 
    } 
    ?> 
</body>

来源

2013-04-09 Derple

呃！不好的缩进，跳过问题。 – elclanrs 2013-04-09 23:01:21

您是否考虑过使用连接或两个从数据库中获取数据？ – PeeHaa 2013-04-09 23:08:11

“不起作用”不是一个合适的描述。请描述你正在做什么和实际发生的事情，包括错误消息。由于这是一个客户端JavaScript问题，请张贴在客户端收到的HTML，而不是生成它的PHP。 – RobG 2013-04-09 23:13:41

Separation of concerns：避免直接在JavaScript中操作元素的风格。造型属于CSS。

这里是我会做：

CSS

.hidden { 
    display: none; 
}

的Javascript：

// show an element 
document.getElementById("my-id").classList.remove("hidden"); 

// hide an element 
document.getElementById("my-id").classList.add("hidden");

班级名册不旧的浏览器的支持，所以一定要确保包括填充工具在https://developer.mozilla.org/en-US/docs/DOM/element.classList

来源

2013-04-09 23:10:35 Bart

建议添加和删除类是一个好主意，但推荐一个在许多浏览器中不起作用的解决方案不适用。链接的填充程序在IE 8中不起作用，并且在各种设备中可能还有许多其他不常见的浏览器。替代方案是一个非常简单的添加/删除类功能，可以在任何地方使用。 – RobG 2013-04-09 23:19:29

@RobG它适用于IE8。没有人使用IE7或更低版本。 – Bart 2013-04-09 23:25:35

我也想，但事实并非如此。虽然评论说明兼容性对我来说可以;） – FelipeAls 2013-04-09 23:54:04

你的问题似乎是在你设置的HTML display property to none，但在脚本中设置了可见性属性。他们是不同的东西。在两个地方设置一个或另一个。

来源

2013-04-09 23:17:20 RobG

显示隐藏JS div css

回答

相关问题