使用JQuery如何显示和隐藏不同div的onClick事件
我想基于链接的Onclick事件显示div。
首先单击 – 显示div1
第二次单击 – 隐藏剩余的div和显示div2
第三次单击 – 隐藏剩余的div并显示div3
第四次单击 – 隐藏剩余的div并显示div1 =>重复循环并继续..
代码遵循：
Jquery代码：
$(document).ready(function() { $("#toggle_value").click(function(){ $("#div1").show("fast"); $("#div2").show("fast"); $("#div3").show("fast"); }); });
上面的代码显示了第一次点击本身的所有div，但它应该在第一次点击时显示div1，如上所述。
我会尝试拍摄。
编辑：在第二个之后，为避免全局变量使用，最好执行以下操作
$(document).ready(function() { $("#toggle_value").click((function(){ var counter = 0; return function() { $("#div" + counter).hide("fast"); counter = (counter % 3) + 1; $("#div" + counter).show("fast"); } })()); });
您应该在函数中添加一个计数器。
$(document).ready(function() { var count = 0; $("#toggle_value").click(function(){ if (count == 0) { $("#div1").show("fast"); $('#div2').hide(); count++; } else if (count == 1) { $("#div2").show("fast"); ... count++; } else if (count == 2) { $("#div3").show("fast"); .... count++; } else { $('div').hide(); count=0; } }); });
这个怎么样
这里的工作示例 – 添加/编辑 URL以编辑代码
$('html').addClass('js'); // prevent hiding divs on DOM ready from 'flashing' $(function() { var counter = 1; $('#toggle_value').click(function() { $('div','#container') // to stop current animations - clicking really fast could originally // cause more than one div to show .stop() // hide all divs in the container .hide() // filter to only the div in question .filter( function() { return this.id.match('div' + counter); }) // show the div .show('fast'); // increment counter or reset to 1 if counter equals 3 counter == 3? counter = 1 : counter++; // prevent default anchor click event return false; }); });
和HTML
Div Example
div1 div2 div3
这可以很容易地包含在插件中
一种简单的方法是引入跟踪点击的变量，如下所示：
var tracker = 0; $(document).ready(function() { $("#toggle_value").click(function(){ if(tracker == 0) { $("#div1").show("fast"); }else if(tracker ==1) etc etc tracker ++; }); });
我的解决方案有点不同 – 我会依赖于当前时间（点击时）div的状态。 请参阅下文，了解我的意思。
$(document).ready(function() { $("#toggle_value").click(function(){ if ($("#div1).is(':visible')) { // Second click // Hide all divs and show d2 $("#div1").hide(); $("#div2").show("fast"); $("#div3").hide(); $("#div4").hide(); } else if ($("#div2").is(':visible')) { // Third click // follow above example for hiding all and showing div3 } else if ($("#div3").is(':visible')) { // Fouth click // follow above example for hiding all and showing div1 } else { // first click // All divs should be hidden first. Show div1 only. $("#div1").show("fast"); } }); });
只是为了警告你 – 我还没有测试过这段代码:)基于以下内容来确定可见性： http ： //docs.jquery.com/Frequently_Asked_Questions#How_do_I_determine_the_state_of_a_toggled_element.3F
希望能帮助到你
我更喜欢使用“filter”方法，并使用计数器更容易一些工作：
(function () { var divCounter = 0, divs; $(function () { divs = $('#div1, #div2, #div3'); $('#toggle_value').click(function (e) { divs.hide() // hide other divs .filter(function (index) { return index == divCounter % 3; }) // select appropriate div .show('fast'); // and show it divCounter++; }); }); })();
我可能会这样做:(以下假设您的所有
s都在一个容器中，ID为“container”）
$(document).ready(function() { var $allDivs = $("#container > div"); var counter = 0; $("#container > div").click(function(){ counter = counter < $allDivs.length - 1 ? counter + 1 : 0; $allDivs.not(":eq("+counter +")").hide("fast"); $allDivs.eq(counter).show("fast"); }); });
jQuery中的.toggle函数接受任意数量的参数函数，因此问题已经解决。 查看“事件”下的文档。
$("#toggle_value").click(function() { $("#div" + (++c) % 3).show().siblings().hide(); }
var c = 1; $("#toggle_value").click(function() { $("#div" + c).hide("fast"); $("#div" + ++c).show("fast"); if (c > 3) c=1; });
首先你必须添加查询基本文件：
然后你必须添加以下代码：
将上面的代码添加到标题部分和主体部分中的下面的代码中。
代码已准备好用于显示和隐藏div的不同图像点击。