Jquery - 每個循環在點擊事件中不起作用

Question

我遇到了這個問題。 在問這個問題之前，我已經在互聯網上搜索了大約 2 個小時，並且我在這里搜索了堆棧溢出。

我在導航跨度上有一個 .click 事件我通過在跨度和 div 上設置相同的標題將這些鏈接到內容 div。

現在我運行來設置標題的兩個循環完美地工作，跨度上的點擊事件完美地工作。 但是，我在 click 事件中嵌套的每個循環都沒有運行，我很困惑為什么。

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" %>

<script runat="server">

</script>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript">
        var i = 0;
        var l = 0;
        var thisTitle;
        $(function() {
           $(".sectionSelector > nav > span").each(function() {
              i += 1;
              $(this).attr("title", i);
           });
           $(".sectionSelector > section").each(function() {
              l += 1;
              $(this).attr("title", l); 
           });
           $(".sectionSelector > nav > span").click(function() {
               thisTitle = $(this).attr("title");
               $(".sectionSelector > section").each(function() {
                   //any code put here doesnt work.  i dont know why.
                });
           });
        });
    </script>
    <style type="text/css">
        div.sectionSelector {

        }
        div.sectionSelector nav {
            width: 100%;
            height: 25px;
            padding-top: 5px;
            background-color: #002;
            color: white;
        }
        div.sectionSelector nav span {
            padding-left: 10px;
            padding-right: 10px;
            border-left: 2px solid white;
            border-right: 2px solid white;
        }
        div.sectionSelector nav span:first-child {
            border-left: 4px solid white;
            margin-left: 10px;
        }
        div.sectionSelector nav span:last-child {
            border-right: 4px solid white;
        }
        div.sectionSelector section {

        }
        div.sectionSelector section:first-child {

        }
        div.sectionSelector section:last-child {

        }
    </style>    
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="phMainContent" Runat="Server">
    <div class="sectionSelector">
        <nav><span>Section 1</span><span>Section 2</span><span>Section 3</span></nav>
        <section>
            <h1>Section 1</h1>
            <p>Lorem ipsum dolor  amet, consectetur adipiscing elit. Ut ac ante efficitur, consequat justo at, auctor urna. Sed luctus ornare metus eu pretium. Cras suscipit risus vel nibh tempus, et dictum nulla tempus. Phasellus mattis suscipit sem. Proin interdum vitae leo cursus porttitor. Nulla ut egestas orci. Ut molestie ultricies mauris. Duis a gravida tellus, id fringilla nisi. Aliquam erat volutpat. Mauris egestas turpis non diam luctus consequat. Sed tincidunt mattis diam, at pretium tortor bibendum sit amet. </p>
        </section>
        <section>
            <h1>Section 2</h1>
            <p>Lorem ipsum dolor  amet, consectetur adipiscing elit. Ut ac ante efficitur, consequat justo at, auctor urna. Sed luctus ornare metus eu pretium. Cras suscipit risus vel nibh tempus, et dictum nulla tempus. Phasellus mattis suscipit sem. Proin interdum vitae leo cursus porttitor. Nulla ut egestas orci. Ut molestie ultricies mauris. Duis a gravida tellus, id fringilla nisi. Aliquam erat volutpat. Mauris egestas turpis non diam luctus consequat. Sed tincidunt mattis diam, at pretium tortor bibendum sit amet. </p>
        </section>
        <section>
            <h1>Section 3</h1>
            <p>Lorem ipsum dolor  amet, consectetur adipiscing elit. Ut ac ante efficitur, consequat justo at, auctor urna. Sed luctus ornare metus eu pretium. Cras suscipit risus vel nibh tempus, et dictum nulla tempus. Phasellus mattis suscipit sem. Proin interdum vitae leo cursus porttitor. Nulla ut egestas orci. Ut molestie ultricies mauris. Duis a gravida tellus, id fringilla nisi. Aliquam erat volutpat. Mauris egestas turpis non diam luctus consequat. Sed tincidunt mattis diam, at pretium tortor bibendum sit amet. </p>
        </section>
    </div>
</asp:Content>

Answer 1

如果您正在尋找根據標題屬性的span選擇相應的section ，請嘗試以下操作：

 $(".sectionSelector > section[title = \""+thisTitle+"\"]")

工作：演示

片段：

 var i = 0; var l = 0; var thisTitle; $(function() { $(".sectionSelector > nav > span").each(function() { i += 1; $(this).attr("title", i); }); $(".sectionSelector > section").each(function() { l += 1; $(this).attr("title", l); }); $(".sectionSelector > nav > span").click(function() { thisTitle = $(this).attr("title"); $(".sectionSelector > section").css("background","#fff"); $(".sectionSelector > section[title = \\""+thisTitle+"\\"]").css("background","lightblue"); }); });

 div.sectionSelector { } div.sectionSelector nav { width: 100%; height: 25px; padding-top: 5px; background-color: #002; color: white; } div.sectionSelector nav span { padding-left: 10px; padding-right: 10px; border-left: 2px solid white; border-right: 2px solid white; } div.sectionSelector nav span:first-child { border-left: 4px solid white; margin-left: 10px; } div.sectionSelector nav span:last-child { border-right: 4px solid white; } div.sectionSelector section { } div.sectionSelector section:first-child { } div.sectionSelector section:last-child { }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="sectionSelector"> <nav><span>Section 1</span><span>Section 2</span><span>Section 3</span></nav> <section> <h1>Section 1</h1> <p>Lorem ipsum dolor amet, consectetur adipiscing elit. Ut ac ante efficitur, consequat justo at, auctor urna. Sed luctus ornare metus eu pretium. Cras suscipit risus vel nibh tempus, et dictum nulla tempus. Phasellus mattis suscipit sem. Proin interdum vitae leo cursus porttitor. Nulla ut egestas orci. Ut molestie ultricies mauris. Duis a gravida tellus, id fringilla nisi. Aliquam erat volutpat. Mauris egestas turpis non diam luctus consequat. Sed tincidunt mattis diam, at pretium tortor bibendum sit amet. </p> </section> <section> <h1>Section 2</h1> <p>Lorem ipsum dolor amet, consectetur adipiscing elit. Ut ac ante efficitur, consequat justo at, auctor urna. Sed luctus ornare metus eu pretium. Cras suscipit risus vel nibh tempus, et dictum nulla tempus. Phasellus mattis suscipit sem. Proin interdum vitae leo cursus porttitor. Nulla ut egestas orci. Ut molestie ultricies mauris. Duis a gravida tellus, id fringilla nisi. Aliquam erat volutpat. Mauris egestas turpis non diam luctus consequat. Sed tincidunt mattis diam, at pretium tortor bibendum sit amet. </p> </section> <section> <h1>Section 3</h1> <p>Lorem ipsum dolor amet, consectetur adipiscing elit. Ut ac ante efficitur, consequat justo at, auctor urna. Sed luctus ornare metus eu pretium. Cras suscipit risus vel nibh tempus, et dictum nulla tempus. Phasellus mattis suscipit sem. Proin interdum vitae leo cursus porttitor. Nulla ut egestas orci. Ut molestie ultricies mauris. Duis a gravida tellus, id fringilla nisi. Aliquam erat volutpat. Mauris egestas turpis non diam luctus consequat. Sed tincidunt mattis diam, at pretium tortor bibendum sit amet. </p> </section> </div>

注意：這里選擇section后改變背景顏色的效果只是隨機的，你可以根據title選擇相應的span的section后隨心所欲