Jquery - 每个循环在click事件中不起作用

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

如果您希望根据section按标题属性选择相应的span，请尝试以下操作：

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

<强> Working : Demo

<强>段：

＆＃13;

＆＃13;

 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");
           });
        });

＆＃13;

 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 {

        }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

  

注意：选择部分后更改背景颜色的效果只是随机的，您可以根据{section选择span的相应title来做您喜欢的任何事情。 {1}}