1

我正在从 asp.net 页面动态创建一些 html 并填写带有链接的表列表。当我单击表格中的第一个元素时，我正在寻找的行为是隐藏以下行中的图像，而不隐藏表格其余部分中的所有图像。我正在使用的 jquery 代码是：

$(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();
    });
});

但这隐藏了以下所有图像，我怎样才能只隐藏同一张表中的图像？？？

代码如下所示：

   <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>
4

1 回答 1

3

改变

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

到

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

顺便说一下，不要让不同的表共享同一个ID

于 2012-04-27T07:54:39.473 回答