Question

这很难用很多背景来解释，所以我为这个疯狂的长问题道歉。此外，我还在学习，所以任何有助于我成为更好的开发人员的建设性反馈都会受到赞赏！

我使用带有遮罩的jQuery图像滑块来隐藏所有图像，然后使用单击功能使图像向左或向右移动X＃像素以显示遮罩中的下一个图像。像素数在使用jQuery应用于ul元素的内联样式中定义，并随每次单击而更改。滑块要求css值等于所有图像的总宽度，然后滑块根据该值计算滑动的距离。

就我而言，宽度为980像素。因此，如果单击右键，ul会添加“style：left：-980px”。在下一个它的“风格= -1960px”等等。

为了捕获实际查看了多少幻灯片，我想编写一些jQuery，它根据样式的值更改Previous和Next按钮的onclick属性：left应用于该ul元素。我写了一些代码来执行此操作，但它并不像预期的那样工作 - 似乎它正在根据元素向前滑动的像素数而不是css的实际值来更改onclick属性。

我做错了什么？我的最终目标是，当显示第一个图像时，Prev需要具有幻灯片9的值，而下一个按钮需要幻灯片2的值。在下一张幻灯片上，它将更改为幻灯片1和幻灯片3，因此上。

Here is a working fiddle.

这是我为滑块附带编写的功能，但请查看小提琴，因为还有更多功能。 SO需要链接到小提琴，并附带代码：

        $j("#next, #prev").click(function() {
          var slideNumber = $j('ul.imgHolder').get(0).style.left;   
          if (slideNumber == '0px'){
                    $j('div#next').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 3']);");
                    $j('div#prev').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 1']);");
                }
            else if (slideNumber == '-980px'){
                    $j('div#next').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 4']);");
                    $j('div#prev').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 2']);");
                }
            else if (slideNumber == '-1960px'){
                    $j('div#next').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 5']);");
                    $j('div#prev').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 3']);");
                }
            else if (slideNumber == '-2940px'){
                    $j('div#next').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 6']);");
                    $j('div#prev').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 4']);");
                }
            else if (slideNumber == '-3920px'){
                    $j('div#next').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 7']);");
                    $j('div#prev').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 5']);");
                }
            else if (slideNumber == '-4900px'){
                    $j('div#next').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 8']);");
                    $j('div#prev').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 6']);");
                }
            else if (slideNumber == '-5880px'){
                    $j('div#next').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 9']);");
                    $j('div#prev').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 7']);");
                }
            else if (slideNumber == '-6860px'){
                    $j('div#next').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 1']);");
                    $j('div#prev').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 8']);");
                }
        });

根据内联css更改onclick属性

0 个答案: