Как использовать JQuery для изменения состояния кнопки на нескольких изображениях

0

Мне было интересно, как правильно использовать jquery для изменения состояний HyperLinkImage, т.е. Mousedown, onmouseup и т.д.... кроме копирования и вставки одной и той же функции и изменения имен имен? Вот код, который я только собираюсь скопировать и вставить и изменить части клиента, чтобы отобразить 5 других ссылок на изображения

$(function () {

        $("#<%=HyperLink1.ClientID%> img").hover(function () {
            $(this).attr("src", "/HoverIcons/Icon_lab.png");
        }, function () {
            $(this).attr("src", "/ActiveIcons/Icon_lab_a.png");
        }).mousedown(function () {
            $(this).attr("src", "/DownIcons/iconlab.png");
        }).mouseup(function () {
            $(this).attr("src", "/ActiveIcons/Icon_lab_a.png");
        });
    });

Есть ли более чистый способ сделать это?

Вот часть, где все ссылки находятся в моей разметке.

<div id="Navigation1">
            <div id="Nav">
                <table style="width: 100%;">
                    <tr>
                        <td>
                            <asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/ActiveIcons/Icon_lab_a.png" NavigateUrl="~/Tabbet.aspx">HyperLink</asp:HyperLink>
                        </td>
                        <td>
                            <asp:HyperLink ID="HyperLink2" runat="server" ImageUrl="~/ActiveIcons/Icon_ABC_a.png">HyperLink</asp:HyperLink>
                        </td>
                        <td>
                            <asp:HyperLink ID="HyperLink3" runat="server" ImageUrl="~/ActiveIcons/Icon_math_a.png">HyperLink</asp:HyperLink>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:HyperLink ID="HyperLink4" runat="server" ImageUrl="~/ActiveIcons/Icon_english_a.png">HyperLink</asp:HyperLink>
                        </td>
                        <td>
                            <asp:HyperLink ID="HyperLink5" runat="server" ImageUrl="~/ActiveIcons/Icon_history_a.png">HyperLink</asp:HyperLink>
                        </td>
                        <td>
                            <asp:HyperLink ID="HyperLink6" runat="server" ImageUrl="~/ActiveIcons/Icon_geography_a.png">HyperLink</asp:HyperLink>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:HyperLink ID="HyperLink7" runat="server" ImageUrl="~/ActiveIcons/Icon_cyberspace_a.png">HyperLink</asp:HyperLink>
                        </td>
                        <td>
                            <img alt="" class="auto-style3" src="ActiveIcons/New_subject_coming.png" /></td>
                        <td>
                            <img alt="" class="auto-style3" src="ActiveIcons/New_subject_coming.png" /></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>

                            &nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                </table>
            </div>

Я только начинаю менять код сейчас, это мой макет для изображений.

  • 0
    Я отредактировал свой вопрос и добавил код, который собирался скопировать, вставить и изменить клиентуру
Теги:

2 ответа

1
Лучший ответ

Сделал это изменение в вашем.aspx файле.

Добавьте CssClass="linkcssclass" в свои гиперссылки следующим образом:

<div id="Navigation1">
            <div id="Nav">
                <table style="width: 100%;">
                    <tr>
                        <td>
                            <asp:HyperLink ID="HyperLink1" CssClass="linkcssclass" runat="server" ImageUrl="~/ActiveIcons/Icon_lab_a.png" NavigateUrl="~/Tabbet.aspx">HyperLink</asp:HyperLink>
                        </td>
                        <td>
                            <asp:HyperLink ID="HyperLink2" CssClass="linkcssclass" runat="server" ImageUrl="~/ActiveIcons/Icon_ABC_a.png">HyperLink</asp:HyperLink>
                        </td>
                        <td>
                            <asp:HyperLink ID="HyperLink3" CssClass="linkcssclass" runat="server" ImageUrl="~/ActiveIcons/Icon_math_a.png">HyperLink</asp:HyperLink>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:HyperLink ID="HyperLink4" CssClass="linkcssclass" runat="server" ImageUrl="~/ActiveIcons/Icon_english_a.png">HyperLink</asp:HyperLink>
                        </td>
                        <td>
                            <asp:HyperLink ID="HyperLink5" CssClass="linkcssclass" runat="server" ImageUrl="~/ActiveIcons/Icon_history_a.png">HyperLink</asp:HyperLink>
                        </td>
                        <td>
                            <asp:HyperLink ID="HyperLink6" CssClass="linkcssclass" runat="server" ImageUrl="~/ActiveIcons/Icon_geography_a.png">HyperLink</asp:HyperLink>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:HyperLink ID="HyperLink7" CssClass="linkcssclass" runat="server" ImageUrl="~/ActiveIcons/Icon_cyberspace_a.png">HyperLink</asp:HyperLink>
                        </td>
                        <td>
                            <img alt="" class="auto-style3" src="ActiveIcons/New_subject_coming.png" /></td>
                        <td>
                            <img alt="" class="auto-style3" src="ActiveIcons/New_subject_coming.png" /></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>

                            &nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                </table>
            </div>

Внесите следующие изменения в jQuery:

<script src="Scripts/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $(".linkcssclass img").each(function (i) {
                $(this).hover(function () {
                       $(this).attr("src", "/HoverIcons/Icon_lab.png");
                }, function () {
                        $(this).attr("src", "/ActiveIcons/Icon_lab_a.png");
                }).mousedown(function () {
                   $(this).attr("src", "/DownIcons/iconlab.png");
                }).mouseup(function () {
                $(this).attr("src", "/ActiveIcons/Icon_lab_a.png");
              });
            });


        });


    </script>
Поделиться
  • 0
    Понял, теперь я понимаю. Благодарю.
1

Я нашел этот ответ в другом вопросе:

<script src="Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        $("#<%=Hyperlink1.ClientID%> img").hover(function () {
            $(this).attr("src", "/Images/logo.png");
        }, function () {
            $(this).attr("src", "/Icons/Icon_english_a.png");
        }).mousedown(function () {
            $(this).attr("src", "/Images/logo.png");
        }).mouseup(function () {
            $(this).attr("src", "/Icons/Icon_english_a.png");
        });
    });

</script>

Ссылка: гиперссылка не может иметь состояния изображения, то есть onmousedown

ОБНОВИТЬ

<table>
    <tr>
        <td class="nav">
            <table>
                <tr>
                    <td>
                        <asp:HyperLink ID="HyperLink1" CssClass="lab" runat="server" ImageUrl="~/ActiveIcons/Icon_lab_a.png" NavigateUrl="~/Tabbet.aspx">HyperLink</asp:HyperLink>
                    </td>
                    <td>
                        <asp:HyperLink ID="HyperLink2" CssClass="abc" runat="server" ImageUrl="~/ActiveIcons/Icon_ABC_a.png">HyperLink</asp:HyperLink>
                    </td>
                    <td>
                        <asp:HyperLink ID="HyperLink3" CssClass="math" runat="server" ImageUrl="~/ActiveIcons/Icon_math_a.png">HyperLink</asp:HyperLink>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
<table>
<script type="text/javascript">
$(document).ready(function() {
  $('.nav a img').hover(function () {
      if($(this).parent().hasClass("lab"))
        $(this).attr("src", "/Images/lab_hover.png");
      //if hasClass("abc")
      //if hasClass("math")
  }, function () {
      if($(this).parent().hasClass("lab"))
            $(this).attr("src", "/Images/lab_a.png");
      //if hasClass("abc")
      //if hasClass("math")
  }).mousedown(function () {
    if($(this).parent().hasClass("lab"))
      $(this).attr("src", "/Images/lab_mousedown.png");
    //if hasClass("abc")
    //if hasClass("math")
  }).mouseup(function () {
    if($(this).parent().hasClass("lab"))
      $(this).attr("src", "/Images/lab_mouseup.png");
    //if hasClass("abc")
    //if hasClass("math")
  });
});
</script>

Я надеюсь, это поможет вам.

Поделиться
  • 0
    Привет, Это был еще один из моих вопросов, на которые получил ответ. Я не помню, чтобы спросить все, что мне нужно было знать в этом, поэтому я должен был начать другой вопрос :)
  • 0
    вам просто нужно добавить имя класса, чтобы идентифицировать все ваши гиперссылки, затем вы должны заменить $("#<%=Hyperlink1.ClientID%> img") на $('.your_hyperlink_class img')
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню