在其他div上動態地隱藏div

-1

<script type="text/javascript"> 
    function bookRetr(str) { 
     if (str == "") { 
      document.getElementById("more-info").innerHTML=""; 
      return; 
     } 

     if (window.XMLHttpRequest) { 
      // code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp = new XMLHttpRequest(); 
     } 
     else { 
      // code for IE6, IE5 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 

     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       document.getElementById("more-info").innerHTML=xmlhttp.responseText; 
      } 
     } 

     xmlhttp.open("GET","showbook.php?id="+str,true); 
     xmlhttp.send(); 
    } 
</script> 

<div class="bookProp" id="one" onClick="bookRetr(this.id)"> 
    <div class="booknoHolder" id="in">&nbsp;01&nbsp;</div> 
</div> 

<div class="bookProp" id="two" onClick="bookRetr(this.id)"> 
    <div class="booknoHolder" id="in">&nbsp;02&nbsp;</div> 
</div> 

<div class="bookProp" id="three" onClick="bookRetr(this.id)"> 
    <div class="booknoHolder" id="in">&nbsp;03&nbsp;</div> 
</div>

這個腳本運行正常，做我想要的工作，加載圖書信息並將它們加載到ID more-info。但我也想隱藏/刪除div類booknoHolder當我點擊div類bookProp。我嘗試了幾個jQuery代碼，但沒有任何工作。要提到div類bookProp實際上是由PHP while循環生成的，因此條目數將是動態的。在其他div上動態地隱藏div

來源

2012-12-17 user1731476

ID應該是唯一的，使用的是相同的ID。 – vusan

刪除了jquery標籤。 –

@vusan id是獨一無二的 – user1731476

你說你正在使用jQuery，但我在代碼中看不到任何jQuery。但是，如果你想隱藏在jQuery的一些元素，你可以這樣做：如果你想隱藏booknoHolder元素，當你點擊一個bookProp

$('.booknoHolder').hide();

，只是這樣做：

$(function() { 
    $('body').on('click', '.bookProp', function() { 
     $(this).find('.booknoHolder').hide(); 
    }); 
});

你可以在這裏找到更多的信息：http://api.jquery.com/on/

來源

2012-12-17 08:44:01 Magus

我知道jQuery代碼，但我試過它沒有工作。 – user1731476

我試過你的代碼，但是當我點擊一本bookProp div時，所有其他booknoHolder都被刪除。我想要相應的div booknoHolder刪除。 – user1731476

我剛編輯我的代碼。 – Magus

對於一個jQuery的解決方案，試試這個：

<script type="text/javascript"> 
    function bookRetr(str) { 
     // Get the HTML via AJAX 
     $.get('showbook.php?id=' + str, function(html) { 
      $("#more-info").html(html); 
     }); 

     // Assuming .bookProp is appended inside #more-info 
     $('#more-info').on('click', '.bookProp', function() { 
      $('.booknoHolder', $(this)).hide(); 
     }); 
    } 
</script>

來源

2012-12-17 08:49:56

什麼都沒有發生 – user1731476

function bookRetr(str) { 
     if (str == "") { 
      document.getElementById("more-info").innerHTML=""; 
      return; 
     } 

     $("#" + str + " .booknoHolder").hide(); 
     ...

來源

2012-12-17 08:52:38 looper

這是有幫助的方法

xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       document.getElementById("more-info").innerHTML=xmlhttp.responseText; 
       if(str=="one") { 
       document.getElementById("one").style.display="block"; 
       document.getElementById("two").style.display="none"; 
       document.getElementById("three").style.display="none"; 
} 
       if(str=="two") { 
document.getElementById("one").style.display="none"; 
       document.getElementById("two").style.display="block"; 
       document.getElementById("three").style.display="none"; 
} 
       if(str=="three") { 
document.getElementById("one").style.display="none"; 
       document.getElementById("two").style.display="none"; 
       document.getElementById("three").style.display="block"; 
} 
      } 
     }

來源

2012-12-17 08:56:59 vusan

我的div是由PHP腳本動態生成的，所以我怎麼能用這種方式編碼？ – user1731476

在其他div上動態地隱藏div

回答

相關問題