2012-04-27 4 views
1

私はasp.netページからいくつかのhtmlを動的に作成し、リンクのテーブルのリストを記入します。 私が探している動作は、テーブルの残りのすべての画像を隠すことなく、テーブルの最初の要素をクリックすると、次の行に画像が隠れてしまいます。 私が使用しているjQueryのコードは次のとおりです。Jquery hideテーブルのリストから1つのテーブルの画像

$(document).ready(function() { 
    $('.AddMainInterest').click(function (event) { 
     var url = $(this).attr("href"); 
     if ($.browser.msie) {//hacked together for IE browsers 
      centeredY = (window.screenTop - 120) + ((((document.documentElement.clientHeight + 120)/2) - (75))); 
      centeredX = window.screenLeft + ((((document.body.offsetWidth + 20)/2) - (150))); 
     } else { 
      centeredY = window.screenY + (((window.outerHeight/2) - (75))); 
      centeredX = window.screenX + (((window.outerWidth/2) - (150))); 
     } 
     window.open(url, null, 'toolbar=no,location=no,menubar=no,width=300,height=150,resizable=yes,scrollbars=no,left=' + centeredX + ',top=' + centeredY).focus(); 
     event.preventDefault(); 
     this.href = this.href.replace("act=a", "act=d"); 
     $(this).prev().toggle(); 
     $("#imgInterest img").hide().filter(":first").show(); 
    }); 
}); 

が、これは、以下のすべての画像を隠して、どのように私は、同じテーブル内の画像のみを隠すことができます?

コードは次のようになります。ちなみに

$(this).closest("table").find("img").hide().first().show(); 

<table id="imgInterest" width="100%;"> 
    <tr> 
     <td> 
      <a href="~/page.aspx?uid=-1&pid=10&sid=2&sc=Y&act=a" class="AddMainInterest"> 
       <img id="first" src="~/icons/CheckMark.png" class="first">Agriculture (General)</a> 
     </td> 
    </tr> 
    <tr valign="middle"> 
     <td> 
      <a href="~/page.aspx" class="AddInterest">Agricultural Facilities and Equipments</a><img 
       src="~/icons/CheckMark.png" class="img-swap"> 
     </td> 
     <td> 
      <a href="~/page.aspx?uid=-1&pid=10&sid=4&sc=Y01&act=a" class="AddInterest">Agricultural 
       Science</a><img src="~/icons/CheckMark.png" class="img-swap"> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <a href="~/page.aspx?uid=-1&pid=10&sid=5&sc=Y02&act=a" class="AddInterest">Algology</a><img 
       src="~/icons/CheckMark.png" class="img-swap"> 
     </td> 
     <td> 
      <a href="~/page.aspx?uid=-1&pid=10&sid=6&sc=Y03&act=a" class="AddInterest">Animal Behavior</a><img 
       src="~/icons/CheckMark.png" class="img-swap"> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <a href="~/page.aspx?uid=-1&pid=10&sid=7&sc=Y07&act=a" class="AddInterest">Animal Health 
       and Nutrition</a><img src="~/icons/CheckMark.png" class="img-swap"> 
     </td> 
     <td> 
      <a href="~/page.aspx?uid=-1&pid=10&sid=8&sc=Y04&act=a" class="AddInterest">Animal Physiology</a><img 
       src="~/icons/CheckMark.png" class="img-swap"> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <a href="~/page.aspx?uid=-1&pid=10&sid=9&sc=Y08&act=a" class="AddInterest">Aquaculture 
       and Fisheries</a><img src="~/icons/CheckMark.png" class="img-swap"> 
     </td> 
     <td> 
      <a href="~/page.aspx?uid=-1&pid=10&sid=10&sc=Y09&act=a" class="AddInterest">Crop and 
       Plant Production</a><img src="~/icons/CheckMark.png" class="img-swap"> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <a href="~/page.aspx?uid=-1&pid=10&sid=11&sc=Y05&act=a" class="AddInterest">Forestry 
       Science</a><img src="~/icons/CheckMark.png" class="img-swap"> 
     </td> 
     <td> 
      <a href="~/page.aspx?uid=-1&pid=10&sid=12&sc=Y10&act=a" class="AddInterest">Pesticides, 
       Insecticides and Herbicides</a><img src="~/icons/CheckMark.png" class="img-swap"> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <a href="~/page.aspx?uid=-1&pid=10&sid=13&sc=Y12&act=a" class="AddInterest">Plant Sciences</a><img 
       src="~/icons/CheckMark.png" class="img-swap"> 
     </td> 
     <td> 
      <a href="~/page.aspx?uid=-1&pid=10&sid=14&sc=Y11&act=a" class="AddInterest">Policy, 
       Reviews and Evaluations</a><img src="~/icons/CheckMark.png" class="img-swap"> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <a href="~/page.aspx?uid=-1&pid=10&sid=15&sc=Y13&act=a" class="AddInterest">Soil Sciences</a><img 
       src="~/icons/CheckMark.png" class="img-swap"> 
     </td> 
     <td> 
      <a href="~/page.aspx?uid=-1&pid=10&sid=16&sc=Y14&act=a" class="AddInterest">Zoology 
       and Animal Science</a><img src="~/icons/CheckMark.png" class="img-swap"> 
     </td> 
     <td> 
     </td> 
    </tr> 
</table> 
</li><li> 
    <table id="imgInterest" width="100%;"> 
     <tr> 
      <td> 
       <a href="~/page.aspx?uid=-1&pid=10&sid=17&sc=A&act=a" class="AddMainInterest"> 
        <img id="first" src="~/icons/CheckMark.png" class="first">Arts and Literature (General)</a> 
      </td> 
     </tr> 
     <tr valign="middle"> 
      <td> 
       <a href="~/page.aspx?uid=-1&pid=10&sid=18&sc=A01&act=a" class="AddInterest">Architecture</a><img 
        src="~/icons/CheckMark.png" class="img-swap"> 
      </td> 
      <td> 
       <a href="~/page.aspx?uid=-1&pid=10&sid=19&sc=A02&act=a" class="AddInterest">Art History</a><img 
        src="~/icons/CheckMark.png" class="img-swap"> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <a href="~/page.aspx?uid=-1&pid=10&sid=20&sc=A03&act=a" class="AddInterest">Children's 
        Literature</a><img src="~/icons/CheckMark.png" class="img-swap"> 
      </td> 
      <td> 
       <a href="~/page.aspx?uid=-1&pid=10&sid=21&sc=A04&act=a" class="AddInterest">Culture 
        Heritage</a><img src="~/icons/CheckMark.png" class="img-swap"> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <a href="~/page.aspx?uid=-1&pid=10&sid=22&sc=A05&act=a" class="AddInterest">Folklore</a><img 
        src="~/icons/CheckMark.png" class="img-swap"> 
      </td> 
      <td> 
       <a href="~/page.aspx?uid=-1&pid=10&sid=23&sc=A06&act=a" class="AddInterest">Latin</a><img 
        src="~/icons/CheckMark.png" class="img-swap"> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <a href="~/page.aspx?uid=-1&pid=10&sid=24&sc=A07&act=a" class="AddInterest">Literature</a><img 
        src="~/icons/CheckMark.png" class="img-swap"> 
      </td> 
      <td> 
       <a href="~/page.aspx?uid=-1&pid=10&sid=25&sc=A08&act=a" class="AddInterest">Music</a><img 
        src="~/icons/CheckMark.png" class="img-swap"> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <a href="~/page.aspx?uid=-1&pid=10&sid=26&sc=A09&act=a" class="AddInterest">Visual and 
        Performing Arts</a><img src="~/icons/CheckMark.png" class="img-swap"> 
      </td> 
      <tr id="clear"> 
       <td> 
       </td> 
      </tr> 
     </tr> 
    </table> 
</li> 
<li> 
    <table id="imgInterest" width="100%;"> 
     <tr> 
      <td> 
       <a href="~/page.aspx?uid=-1&pid=10&sid=27&sc=B&act=a" class="AddMainInterest"> 
        <img id="first" src="~/icons/CheckMark.png" class="first">Astronomy/Astrophysics/Space 
        Science (General)</a> 
      </td> 
     </tr> 
     <tr valign="middle"> 
      <td> 
       <a href="~/page.aspx?uid=-1&pid=10&sid=543&sc=B10&act=a" class="AddInterest">Aircrafy 
        and Flight</a><img src="~/icons/CheckMark.png" class="img-swap"> 
      </td> 
      <td> 
       <a href="~/page.aspx?uid=-1&pid=10&sid=544&sc=B11&act=a" class="AddInterest">Astronomy 
        and Astrophysics</a><img src="~/icons/CheckMark.png" class="img-swap"> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <a href="~/page.aspx?uid=-1&pid=10&sid=28&sc=B01&act=a" class="AddInterest">Celestial 
        Mechanics</a><img src="~/icons/CheckMark.png" class="img-swap"> 
      </td> 
      <td> 
       <a href="~/page.aspx?uid=-1&pid=10&sid=29&sc=B02&act=a" class="AddInterest">Cosmology</a><img 
        src="~/icons/CheckMark.png" class="img-swap"> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <a href="~/page.aspx?uid=-1&pid=10&sid=30&sc=B03&act=a" class="AddInterest">Extragalactic 
        Astronomy</a><img src="~/icons/CheckMark.png" class="img-swap"> 
      </td> 
      <td> 
       <a href="~/page.aspx?uid=-1&pid=10&sid=31&sc=B04&act=a" class="AddInterest">Interstellar 
        Matter</a><img src="~/icons/CheckMark.png" class="img-swap"> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <a href="~/page.aspx?uid=-1&pid=10&sid=32&sc=B05&act=a" class="AddInterest">Meteors</a><img 
        src="~/icons/CheckMark.png" class="img-swap"> 
      </td> 
      <td> 
       <a href="~/page.aspx?uid=-1&pid=10&sid=545&sc=B12&act=a" class="AddInterest">Policy, 
        Reviews and Evaluations</a><img src="~/icons/CheckMark.png" class="img-swap"> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <a href="~/page.aspx?uid=-1&pid=10&sid=33&sc=B06&act=a" class="AddInterest">Solar Terrestrial 
        Physics</a><img src="~/icons/CheckMark.png" class="img-swap"> 
      </td> 
      <td> 
       <a href="~/page.aspx?uid=-1&pid=10&sid=546&sc=B13&act=a" class="AddInterest">Space Exploration 
        and Development</a><img src="~/icons/CheckMark.png" class="img-swap"> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <a href="~/page.aspx?uid=-1&pid=10&sid=547&sc=B14&act=a" class="AddInterest">Space Systems 
        and Hardware</a><img src="~/icons/CheckMark.png" class="img-swap"> 
      </td> 
      <td> 
       <a href="~/page.aspx?uid=-1&pid=10&sid=34&sc=B07&act=a" class="AddInterest">Stars</a><img 
        src="~/icons/CheckMark.png" class="img-swap"> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <a href="~/page.aspx?uid=-1&pid=10&sid=35&sc=B08&act=a" class="AddInterest">The Sun</a><img 
        src="~/icons/CheckMark.png" class="img-swap"> 
      </td> 
      <td> 
       <a href="~/page.aspx?uid=-1&pid=10&sid=36&sc=B09&act=a" class="AddInterest">Theoretical 
        Astrophysics</a><img src="~/icons/CheckMark.png" class="img-swap"> 
      </td> 
      <td> 
      </td> 
     </tr> 
    </table> 

答えて

3

変更

$("#imgInterest img").hide().filter(":first").show(); 

を、異なるテーブルが同じID

を共有することはできません。
+0

ありがとうございました...そのディそれは私のためだ。 – Mazen

関連する問題