Блог

Мне интересно, как я могу показать несколько разделов после того, как пользователь нажмет на ссылку imaging «importantImg» ниже, используя jquery (importantImg не указан ниже, но есть в моей программе). Проблема в том, что это всего лишь один фрагмент всей страницы, на котором также есть divs, поэтому я не хочу, чтобы мой выбор был «div», я просто хочу взаимодействовать с этими 4 конкретными divs. Вот HTML, который содержит 5 разделов:

 <div id="divLayer1">
<div id="divLayer2" class="alertPod">
    <img src="<%= Page.ResolveUrl("~/{0}/_res/_images/icon_alertMessage.png",   PBS.Cms.Settings.PBSFolderName) %>" />

</div>

<div id = "divLayer3" class="msgPod">
    <div id= "divLayer4" class="messageWrapper">
        <h6>IMPORTANT ANNOUNCEMENT</h6>
        <div class="box">         
            <div id="divLayer5" class="viewport" style="overflow: auto; height: 48px;"  runat="server">
                <p> <%--id= "importantMessage">--%> 
                <asp:Literal ID="ltimportantannouncementTitle" runat="server"></asp:Literal>
                <br />
                <asp:Literal ID="ltimportantannouncementSummary" runat="server"></asp:Literal>
                </p>
            </div>
        </div>
    </div>
    <a href="#" ><img id="alertCloseBtn" src="<%= Page.ResolveUrl("~/           {0}/_res/_images/button_alertMsgClose.png", PBS.Cms.Settings.PBSFolderName) %>" /></a> 
  

Вот скрипт jquery, который я использую, который не работает:

 <script type="text/javascript">
    $(document).ready(function () {
        $("img#importantImg").click(function () {                
            $("#divLayer1").show(); 
            $("#divLayer2").show(); 
            $("#divLayer3").show();
            $("#divLayer4").show();
            $("#divLayer5").show();                                                
            $("#importantImg").attr("src", "<%=  Page.ResolveUrl("~/{0}/_res/_images/icon_alertMessage.png", PBS.Cms.Settings.PBSFolderName) %>");                               
        });
    });

</script>
  

Здесь две вещи:

1) Вам не нужно создавать $ (document).ready() для каждой имеющейся у вас функции. Вы можете сделать это один раз, а затем поместить все внутрь этого.

2) Ваш пример немного сложный, поскольку это вопрос jQuery, и в нем есть ASP-код. Вот моя интерпретация того, что вы пытаетесь сделать:

Javascript: $(документ).готово(функция() { $(‘#show_message’).click(функция() { $(‘.message’).html(‘Это важное сообщение!’); $(‘.alert_pod’).show(); });

         $('#hide_message').click(function() {
           $('.alert_pod').hide();
       });
    });
  

HTML:

Показать сообщение

Важное сообщение здесь
Скрыть сообщение

Я не знаю ASP (или что бы вы ни использовали), но я подозреваю, что проблема в том, что некоторые из ваших элементов, похоже, не имеют идентификаторов. Вы вызываете их в Javascript, но JS не может найти элементы, потому что, насколько я могу судить, нет id =»importantImg».

Надеюсь, это поможет.