표시 숨기기 JS div css

-2

메신저하지만, js에 심각한 학습자, 나는 내 목표를 달성하기 위해 3 가지 방법을 시도하고 내가 구현하는 가장 쉬운 것 같습니다 그래서 내 목표를 달성 할 수있는 방법을 보았다, 하지만 어떤 이유로 그것은 작동하지 않습니다. 필자는 작동하지 않는 특정 함수에 필요한 비트만을 포함 시켰습니다.이 함수는 db의 항목을 기반으로 while 루프 내에서 작동하며 각 함수와 링크를 구별하기 위해 {$ page_trackid}로 구분됩니다.표시 숨기기 JS div css

나는이 '스타일'기능을 사용할 수 있다고 이해하지만, 내가 말하는 것처럼 메신저는 새로운 것보다 훨씬 복잡해지기까지 필요한 것을 성취하려고 노력하고있다.

여기에서 완전히 잘못된 일이 있습니까?

건배

<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

조인을 사용하여 데이터베이스에서 데이터를 가져 오는 것이 좋습니다. – PeeHaa

"작동하지 않음"은 적절한 설명이 아닙니다. 오류 메시지를 포함하여 무엇을하려고하고 실제로 일어나는지 설명하십시오. 그리고 이것이 클라이언트 측 자바 스크립트 질문이기 때문에 클라이언트가받은 HTML을 게시하십시오. PHP를 생성하는 PHP가 아닙니다. – RobG

Separation of concerns이 : 자바 스크립트에서 직접 요소의 스타일을 조작하지 마십시오. 스타일은 CSS에 속합니다.

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

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

classList 오래된 브라우저에서 지원되지 않으므로 https://developer.mozilla.org/en-US/docs/DOM/element.classList

에서 polyfill를 포함해야합니다

CSS

.hidden { 
    display: none; 
}

자바 스크립트 : 여기

내가 어떻게 할 것인지의

출처

2013-04-09 23:10:35 Bart

클래스 추가 및 제거를 제안하는 것이 좋습니다. 그러나 사용중인 많은 수의 브라우저에서 작동하지 않는 솔루션을 권장하는 것은 아닙니다. 링크 된 심은 IE 8에서는 작동하지 않으며, 적어도 다양한 장치에서는 덜 일반적으로 사용되는 브라우저가 많습니다. 대안은 모든 곳에서 사용할 수있는 매우 간단한 클래스 추가/제거 기능입니다. – RobG

@RobG IE8에서 작동합니다. 아무도 IE7 이하를 사용하지 않습니다. – Bart

나는 이것 또한 원하지 만, 이것은 그렇지 않다. 호환성에 대해 언급 한 의견은 저에게 맞지만) – FelipeAls

HTML에 문제가있는 것처럼 보입니다. 표시는 이 아니며입니다. 그러나 스크립트에서 visibility 속성을 설정하고 있습니다. 그것들은 다른 것들입니다. 두 위치 모두에서 하나 또는 다른 하나를 설정하십시오.

출처

2013-04-09 23:17:20 RobG

표시 숨기기 JS div css

답변

관련 문제