jquery滑块逻辑

发布于 2024-10-25 08:49:23 字数 807 浏览 2 评论 0原文

我知道那里有大量的滑块，我想做的是像 Coda-Slider 这样的东西，但是我想学习 JavaScript (jQuery) 并使用我所拥有的东西，而不是将所有 HTML 代码更改为现有滑块所需的语法。

我最大的问题之一是我把简单的事情想得太复杂，并期望复杂的事情很容易解决。

var shopContent = $('div.tx-jfmulticontent-pi1');
var shopTrigger = $('div.shop-items > div');

for(var i=0; i < shopTrigger.length; i++) {
    $(shopTrigger[i]).click(function(){
        $(shopContent[i]).slideUp();                              
    });
}

我的想法是：使用点击项目的（触发div）索引号使用相应的索引对内容 div 进行动画处理。显然，当我使用 console.log 检查 i 的值时，我得到 12 （触发项的数量），因为 for 循环运行得很快！

如果您能给我一些指导，我应该从哪里开始学习如何解决此类问题，我将不胜感激。不确定，也许我必须回到 JavaScript 的基础知识，但大多数时候，我可以绘制一个方案，需要什么样的事件和操作，但我完全不擅长将其转化为代码。

感谢您的任何帮助和建议！

原文

I know there are tons of sliders out there and what I want to do is something like Coda-Slider, however I want to learn JavaScript (jQuery) and work with what I have instead of changing all the HTML code to an existing slider's required syntax.

One of my biggest problems is that I think too complicated about simple things and expect complicated stuff to be solved easily.

sketch

var shopContent = $('div.tx-jfmulticontent-pi1');
var shopTrigger = $('div.shop-items > div');

for(var i=0; i < shopTrigger.length; i++) {
    $(shopTrigger[i]).click(function(){
        $(shopContent[i]).slideUp();                              
    });
}

My idea was: use the clicked item's (trigger div) index number to animate the content div with the corresponding index. Obviously, when I check i's value with console.log, I get 12 (number of trigger items) since the for loop runs quickly through!

I would appreciate a lot if you can give me some directions where I should start learning how to solve these kind of problems. Not sure, maybe I have to go back to the very basics of JavaScript but most of the time, I can draw a scheme what kind of events and actions are needed but I totally suck at turning it into code.

Thanks for any kind of help and advice!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

祁梦 2024-11-01 08:49:23

演示： http://jsbin.com/odeta3/2

这是一个非常斯巴达的演示，但你可以得到这样的想法，

你可以通过使用轻松地做到这一点

<div id="container">
<div id="display-image"></div>
<ul id="display-thumbs">
<li><img /></li><li><img /></li><li><img /></li><li><img /></li>
</ul>
</div>

$(function() {  
  $('#display-thumbs li img:first').clone(true).appendTo('#display-image');  
    $('#display-thumbs li img').click(function() {
        var image = this.src;
        $('#display-image img').animate({
            'top': '-425px'
        },
        500,function() {
            $(this).remove();
            $('<img></img>').attr('src', image).css('top', '425px').appendTo('#display-image').animate({
                'top': '0'
            },
            500);
        });
    });
});

DEMO: http://jsbin.com/odeta3/2

this is a very spartan demo but you can get the idea

you can easily do this by using

<div id="container">
<div id="display-image"></div>
<ul id="display-thumbs">
<li><img /></li><li><img /></li><li><img /></li><li><img /></li>
</ul>
</div>

$(function() {  
  $('#display-thumbs li img:first').clone(true).appendTo('#display-image');  
    $('#display-thumbs li img').click(function() {
        var image = this.src;
        $('#display-image img').animate({
            'top': '-425px'
        },
        500,function() {
            $(this).remove();
            $('<img></img>').attr('src', image).css('top', '425px').appendTo('#display-image').animate({
                'top': '0'
            },
            500);
        });
    });
});

回复收藏 0 原文

~没有更多了~