[asp.net]Jquery-每个循环不工作内单击事件

发布时间: 2017/3/26 2:07:25
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我有这个问题的问题。 有互联网寻找前问这,约 2 小时,找遍了这里的堆栈溢出。

我有一句话事件上导航跨度我连接这些内容 div 的跨度和 div 设置相同的标题。

现在两个循环,我对集标题很好地工作和 click 事件跨度工作完美地运行。 但是我有嵌套在 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>

解决方法 1:

如果你正在寻找选择相应的 section 作为每 span 的 title 属性,比试试这个︰

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

Working : Demo

代码段︰

 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>

注︰选择节后改变背景色的效果是只是随机的你可以做任何你喜欢选择相应后 sectionspan 基于title

官方微信
官方QQ群
31647020