Question

我有一个包含许多功能面板的页面 - 在其下面我为每个功能面板添加了一个按钮。我们的想法是，当用户点击按钮时，将呈现相关的面板（其余部分被隐藏）。我正在研究一些JQuery ...

从要素面板创建一个数组 - 其中class = slide-content
逐步浏览数组，为每个功能面板创建一个“按钮” - #slidecontrol + unique ID
然后将这些链接（
中的链接）附加到页面中的一个集合
当用户点击链接时，代码会退回数组，关闭那些不相关的功能面板并打开那个功能面板。然后，此代码还尝试将唯一样式应用于单击的链接....

......这就是我遇到问题的地方。出于某种原因，我无法引用以前动态创建的链接 - 既不使用.css（）也不使用.addClass（）。

我的jQuery代码：

slideArray = $('.slide-content'); //array of slide-content divs
var $ulslidecontrols = $('#slide-controls'); //instance of slides ul
var $indexno 
//step through the array - create a nav button/link for each slide content div
$.each(slideArray, function (index, value) {
    $indexno = index;
    $indexno++;
    $ulslidecontrols.append(
        $("<li><a href='#' class='slide-control' id='slidecontrol " + $indexno + "'>"
        + $indexno + "</a></li>")
    );
});

$('a.slide-control').click(function () {
    var $slide = $(this).attr("id");
    $slide = $slide.charAt($slide.length - 1);

    //step through the slideArray, hiding slide-content not selected and amending
    style of slide-controls
        $.each(slideArray, function (index, value) {
            $indexno = index;
            $indexno++
            if ($indexno == $slide) {
                $('#slidecontent' + $indexno).hide().fadeIn(600); 
                //display slide content
                $('#slidecontrol' + $indexno).css('font-size', '50px');
            } 

            else {
                $('#slidecontent' + $indexno).hide(); //hide slide content
            }
        });
   });

Answer 1

丹，

对运行时添加的任何元素使用jquery live。

http://api.jquery.com/live/

我觉得你的代码中有错误

检查$ indexno正在打印什么

 $('#slidecontent'+$indexno)

jQuery在动态创建后设置样式/引用元素

1 个答案: