Javascript JQuery清理和自动选择下一个div和nav项

我的第一个问题是：；我有5个图像，当点击时显示一个相关的div并隐藏其余部分。这就是我编写代码的方式，我只是觉得这是一种混乱而冗长的编码方式。我是jQuery的新手，我只是想听听你的建议。这是我的密码：

$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);

$('#nav-fragment-0').fadeTo("slow", 1);
    $('#nav-fragment-1').fadeTo("slow", 0.33);
    $('#nav-fragment-2').fadeTo("slow", 0.33);
    $('#nav-fragment-3').fadeTo("slow", 0.33);
    $('#nav-fragment-4').fadeTo("slow", 0.33);

$("#nav-fragment-0").click(function() {
    $('#fragment-0').show();
    $('#fragment-1').hide();
    $('#fragment-2').hide();
    $('#fragment-3').hide();
    $('#fragment-4').hide();


    $('#nav-fragment-0').fadeTo("slow", 1);
    $('#nav-fragment-1').fadeTo("slow", 0.33);
    $('#nav-fragment-2').fadeTo("slow", 0.33);
    $('#nav-fragment-3').fadeTo("slow", 0.33);
    $('#nav-fragment-4').fadeTo("slow", 0.33);


    });
$("#nav-fragment-1").click(function() {
    $('#fragment-1').show();
    $('#fragment-0').hide();
    $('#fragment-2').hide();
    $('#fragment-3').hide();
    $('#fragment-4').hide();

    $('#nav-fragment-1').fadeTo("slow", 1);
    $('#nav-fragment-0').fadeTo("slow", 0.33);
    $('#nav-fragment-2').fadeTo("slow", 0.33);
    $('#nav-fragment-3').fadeTo("slow", 0.33);
    $('#nav-fragment-4').fadeTo("slow", 0.33);

    })
$("#nav-fragment-2").click(function() {
    $('#fragment-2').show();
    $('#fragment-0').hide();
    $('#fragment-1').hide();
    $('#fragment-3').hide();
    $('#fragment-4').hide();

    $('#nav-fragment-2').fadeTo("slow", 1);
    $('#nav-fragment-0').fadeTo("slow", 0.33);
    $('#nav-fragment-1').fadeTo("slow", 0.33);
    $('#nav-fragment-3').fadeTo("slow", 0.33);
    $('#nav-fragment-4').fadeTo("slow", 0.33);

    })
$("#nav-fragment-3").click(function() {
    $('#fragment-3').show();
    $('#fragment-0').hide();
    $('#fragment-1').hide();
    $('#fragment-2').hide();
    $('#fragment-4').hide();

    $('#nav-fragment-3').fadeTo("slow", 1);

    $('#nav-fragment-0').fadeTo("slow", 0.33);
    $('#nav-fragment-1').fadeTo("slow", 0.33);
    $('#nav-fragment-2').fadeTo("slow", 0.33);
    $('#nav-fragment-4').fadeTo("slow", 0.33);

    })
$("#nav-fragment-4").click(function() {
    $('#fragment-4').show();
    $('#fragment-0').hide();
    $('#fragment-1').hide();
    $('#fragment-2').hide();
    $('#fragment-3').hide();

    $('#nav-fragment-4').fadeTo("slow", 1);
    $('#nav-fragment-0').fadeTo("slow", 0.33);
    $('#nav-fragment-1').fadeTo("slow", 0.33);
    $('#nav-fragment-2').fadeTo("slow", 0.33);
    $('#nav-fragment-3').fadeTo("slow", 0.33);

    })


});

以下是UL，其中包含单击的导航图像

<ul class="ui-tabs-nav ui-tabs ui-widget ui-widget-content ui-corner-all">
  <li class="ui-tabs-nav-item ui-tabs-selected"><a><img src="2013/08/16-150x112.jpg" alt="" width="90" height="57" id="nav-fragment-0" ></a></li>
  <li class="ui-tabs-nav-item ui-tabs-selected"><a><img src="2013/05/1-150x112.jpg" alt="" width="90" height="57" id="nav-fragment-1" ></a></li>
  <li class="ui-tabs-nav-item ui-tabs-selected"><a><img src="2013/06/P6172474-150x112.jpg" alt="" width="90" height="57" id="nav-fragment-2" ></a></li>
  <li class="ui-tabs-nav-item ui-tabs-selected"><a><img src="2011/12/Florence.out_-150x112.jpg" alt="" width="90" height="57" id="nav-fragment-3" ></a></li>
  <li class="ui-tabs-nav-item ui-tabs-selected"><a><img src="2013/08/11-150x112.jpg" alt="" width="90" height="57" id="nav-fragment-4" ></a></li>
</ul>

下面是div：

<div id="fragment-0" class="ui-tabs-panel ui-tabs-hide"></div>
<div id="fragment-1" class="ui-tabs-panel ui-tabs-hide"></div>
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide"></div>
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide"></div>
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide"></div>

---

第二个问题是，我如何让它们在10秒后通过每一个，然后连续循环通过它们

我认为这或多或少会起作用，您需要向所有items class=itemClass添加一个类：

for (i=0; i<=4; i++) {
    $("#nav-fragment-" + i).click(function() {
        $(".itemClass").hide().fadeTo("slow", 0.33);
        $("#fragment-" + i).show().fadeTo("slow", 1);
    });
}

---

我认为这或多或少会起作用，您需要向所有items class=itemClass添加一个类：

for (i=0; i<=4; i++) {
    $("#nav-fragment-" + i).click(function() {
        $(".itemClass").hide().fadeTo("slow", 0.33);
        $("#fragment-" + i).show().fadeTo("slow", 1);
    });
}

---

给所有与图像相关的div和图像本身一些类。比如：

<img src="#" class="someImg" />
<img src="#" class="someImg" />
<img src="#" class="someImg" />
<img src="#" class="someImg" />
<img src="#" class="someImg" />

<div class="relatedDiv"> ... </div>
<div class="relatedDiv"> ... </div>
<div class="relatedDiv"> ... </div>
<div class="relatedDiv"> ... </div>
<div class="relatedDiv"> ... </div>

---

至于问题的第二部分，您可以使用setInterval函数，如果您设置一个额外的类（如active），以确定当前选择了哪一个图像

为所有与图像相关的div和图像本身设置一个类，则会更容易。比如：

<img src="#" class="someImg" />
<img src="#" class="someImg" />
<img src="#" class="someImg" />
<img src="#" class="someImg" />
<img src="#" class="someImg" />

<div class="relatedDiv"> ... </div>
<div class="relatedDiv"> ... </div>
<div class="relatedDiv"> ... </div>
<div class="relatedDiv"> ... </div>
<div class="relatedDiv"> ... </div>

---

至于问题的第二部分，您可以使用setInterval函数，如果您设置一个额外的类（如active）来确定当前选择了哪一个图像，则会更容易些。我建议您使用CSS处理活动状态，只需使用jQuery来切换这些类

jQuery

HTML

---

我建议使用CSS处理活动状态，只需使用jQuery切换这些类

jQuery

HTML

---

根据您的html，您可以执行以下操作：

对所有导航片段使用相同的类：。导航片段

将所有.nav片段绑定到如下内容：

---

根据您的html，您可以执行以下操作：

对所有导航片段使用相同的类：。导航片段

将所有.nav片段绑定到如下内容：

---

无需向html中添加任何类或div，就可以像这样解决问题

//initialize these arrays with all the nav-fragments and fragments ids
var navFragment = [$("#nav-fragment-0"), $("#nav-fragment-1"), $("#nav-fragment-2")];

var fragment = [$("#fragment-0"), $("#fragment-1"), $("fragment-2")];

//from here the problem is solved in general
var i,j;
for(i=0; i < navFragment.length;i++) {
   navFragment[i].click( (function(selected) {
     return function() {
       for(j=0; j < navFragment.length;j++) {
            if(j !== selected) {
                fragment[j].hide();
                navFragment[j].fadeTo("slow", 0.33);
            } else {
                fragment[j].show();
                navFragment[j].fadeTo("slow", 1);
            }
        }
     }
   })(i);    
   );
}

---

无需向html中添加任何类或div，就可以像这样解决问题

//initialize these arrays with all the nav-fragments and fragments ids
var navFragment = [$("#nav-fragment-0"), $("#nav-fragment-1"), $("#nav-fragment-2")];

var fragment = [$("#fragment-0"), $("#fragment-1"), $("fragment-2")];

//from here the problem is solved in general
var i,j;
for(i=0; i < navFragment.length;i++) {
   navFragment[i].click( (function(selected) {
     return function() {
       for(j=0; j < navFragment.length;j++) {
            if(j !== selected) {
                fragment[j].hide();
                navFragment[j].fadeTo("slow", 0.33);
            } else {
                fragment[j].show();
                navFragment[j].fadeTo("slow", 1);
            }
        }
     }
   })(i);    
   );
}

---

我同意@Arnaud的回答，但是关于你的第二部分的问题，要循环它们，你可以这样做

$(document).ready(function () {
    iterator = 1;

    $("a.nav-fragment").on("click", function (event) {
        $(this).fadeTo("slow", 1);
        $(this).siblings("a.nav-fragment").fadeTo("slow", 0.33);
    });

    // set interval for ever 1 second (1000 milliseconds)
    setInterval(function () {
        $($("a.nav-fragment")[iterator - 1]).trigger('click');
        if ((iterator) == $("a.nav-fragment").length) {
            iterator = 1;
        } else {
            iterator++;
        }
    }, 1000)

});

全小提琴

请记住，如果您希望每10秒在毫秒上添加一个0，并在开始时单击第一个0。

---

这也将在有人点击后继续进行。从迭代器所在的位置继续。如果您想更改顺序，可以在单击侦听器中操纵迭代器的值。

我同意@Arnaud的回答，但是对于查询的第二部分，要循环遍历迭代器，您可以这样做

$(document).ready(function () {
    iterator = 1;

    $("a.nav-fragment").on("click", function (event) {
        $(this).fadeTo("slow", 1);
        $(this).siblings("a.nav-fragment").fadeTo("slow", 0.33);
    });

    // set interval for ever 1 second (1000 milliseconds)
    setInterval(function () {
        $($("a.nav-fragment")[iterator - 1]).trigger('click');
        if ((iterator) == $("a.nav-fragment").length) {
            iterator = 1;
        } else {
            iterator++;
        }
    }, 1000)

});

全小提琴

请记住，如果您希望每10秒在毫秒上添加一个0，并在开始时单击第一个0。

---

这也将在有人点击后继续进行。从迭代器所在的位置继续。如果要更改顺序，可以在单击侦听器中操作迭代器的值。

能否请共享与此代码相关的html部分。能否请共享与此代码相关的html部分。

$(document).ready(function () {
    iterator = 1;

    $("a.nav-fragment").on("click", function (event) {
        $(this).fadeTo("slow", 1);
        $(this).siblings("a.nav-fragment").fadeTo("slow", 0.33);
    });

    // set interval for ever 1 second (1000 milliseconds)
    setInterval(function () {
        $($("a.nav-fragment")[iterator - 1]).trigger('click');
        if ((iterator) == $("a.nav-fragment").length) {
            iterator = 1;
        } else {
            iterator++;
        }
    }, 1000)

});