javascript - JQuery 清理并自动选择下一个 div 和导航项

Question

我的第一个问题是这个；我有 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 秒后快速浏览每一个，然后不断循环播放它们？

score 2 · Accepted Answer

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

对所有导航片段使用相同的类：.nav-fragments
将所有 .nav-fragments 绑定到类似：http: //jsfiddle.net/hxU4G/

$(this).fadeTo("slow", 1);

$(this).siblings(".nav-fragment").fadeTo("slow", 0.33);

score 1 · Accepted Answer

我认为这应该或多或少起作用，您需要为所有项目添加一个类（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);
    });
}

score 0 · Accepted Answer

给所有与图像相关的 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>

现在用 jQuery 检查点击了哪一个：

$(".someImg").click(function(){
    var eq = $(this).index() - 1; // because index() is one-based and eq() is zero-based

    $(".someImg").fadeTo("slow", 0.33);
    $(this).fadeTo("slow", 1);
    $(".relatedDiv").hide().eq(eq).show();
})

至于你问题的第二部分，你可以使用 setInterval 函数（如果你设置一个像“active”这样的附加类来确定当前选择了哪一个图像会更容易）

score 0 · Accepted Answer

我建议使用 CSS 处理您的活动状态，并使用 jQuery 来切换这些类。

Codepen 草图。

jQuery

$('.nav-fragment').on('click', function() {
  $('.nav-fragment').removeClass('active');
  $(this).addClass('active');
});

HTML

<div class='nav-fragment active'></div>
<div class='nav-fragment'></div>
<div class='nav-fragment'></div>
<div class='nav-fragment'></div>
<div class='nav-fragment'></div>

CSS

.nav-fragment {
  background: crimson;
  cursor: pointer;
  display: inline-block;
  height: 200px;
  opacity: 0.33;
  width: 200px;

  -webkit-transition: opacity 1s;
     -moz-transition: opacity 1s;
          transition: opacity 1s;
}

.nav-fragment.active {
  opacity: 1;
}

score 0 · Accepted Answer

无需在 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);    
   );
}

score 0 · Accepted Answer

我同意@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)

});

完整的小提琴http://jsfiddle.net/rp4ZJ/

请记住，如果您想让它每 10 秒运行一次，则在毫秒上添加一个 0，并最初触发对第一个开始的单击。这也将在有人点击后继续。从迭代器所在的位置继续。如果要更改顺序，可以在单击侦听器中操作迭代器的值。

javascript - JQuery 清理并自动选择下一个 div 和导航项

6 回答 6

Related

Reference