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秒后轻松浏览每一个然后连续循环它们？

Answer 1

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

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

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

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

Answer 2

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

Answer 3

将与图像和图像相关的所有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”这样的额外类来确定当前选择哪一个图像会更容易）

Answer 4

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

Codepen sketch.

<强>的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;
}

Answer 5

不向你的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);    
   );
}

Answer 6

我同意@ 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秒钟将其添加到毫秒上，并且最初触发第一个开始时点击。这也会在有人点击之后继续进行。继承迭代器所在的位置。如果要更改顺序，可以在单击侦听器中操作迭代器的值。

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

6 个答案: