1

我正在做一个新闻提要，比如在 7 秒后轮换新闻。我正在使用 Jquery 函数$().slideUp()和$().slideDown().

这是我的 HTML：

<div id='F1' class='Nouvelles' style='background-image:url(../ImagesAnnonces/google_chrome.png); background-size:contain;'>
    <h2>test</h2>
    <p>test</p>
</div>
<div id='E2' class='Nouvelles' style='background-image:url(../ImagesAnnonces/images.jpeg); background-size:contain;'>
    <h2>test</h2>
    <p>test</p>
</div>
<div id='F3' class='Nouvelles' style='background-image:url(../ImagesAnnonces/); background-size:contain;'>
    <h2>test 2 FR</h2>
    <p></p>
</div>
<div id='F4' class='Nouvelles' style='background-image:url(../ImagesAnnonces/asdfgfhjkl.jpeg); background-size:contain;'>
    <h2></h2>
    <p></p>
</div>

这是我到目前为止所做的：

//This is just a AJAX call that generate all the '.Nouvelle' which translate from french to news.

$(document).ready
        (function(){
            $.ajax(
            {
                url:"handlingPub.php",
                type:"GET",
                dataType:"text",
                contentType:"application/x-www-form-urlencoded;charset=UTF-8",
                success:function(code_html, status)
                            {
                                $("#divPub").append(code_html);
                                $(".Nouvelles").css(
                                    {
                                        height:"90px",
                                        display:"none",
                                        padding:"0px",
                                        margin:"10px",
                                        overflow:"hidden",
                                        border:"solid white 2px"
                                    });
                                $('.Nouvelles[id^="F"]:lt(1)').css("display", "block");
                                $(".Nouvelles h2").css({padding:"0px", margin:"0px"});
                            } 
            });

//the problem seems to be here...
//Get the first id
            var id = $('.Nouvelles[id^="F"]').first().attr('id').substring(1);
            alert(id);//This return 'undefined'...
//Every 7 sec.
            var int = self.setInterval
            (function(){
                var max = 0;
                //Get the number of news (I know I could use size() or length I will change it later)                   
                $('.Nouvelles[id^="F"]').each(function(){max++;});
                if(max > 1)//If there is more than 1 news
                {                       
                        $(".Nouvelles[id=F"+id+"]").slideUp();//slide it up
                        if(id >= max)//If the id of the news is bigger than the last one set it to the first
                        {
                            id = $('.Nouvelles[id^="F"]:first').attr('id').substring(1);
                        }
                        else//else go get the next
                        {
                            id = $('.Nouvelles[id^="F"]').next('.Nouvelles[id="F'+id+'"]').attr('id').substring(1);
                        }

                        $('.Nouvelles[id="F'+id+'"]').slideDown();//slide the next news down
                }
            }
            , 7000);
        });

每个 '.Nouvelles' 都有唯一的 ID，以法语的“F”或英语的“E”开头。我现在只想旋转和显示法国的。法语和英语新闻将以随机模式交替出现。所以“F1”的下一个兄弟有一天可能是“F2”或“E2”。

我遇到的问题是这里的这条线：

//the problem seems to be here...
//Get the first id
            var id = $('.Nouvelles[id^="F"]').first().attr('id').substring(1);
            alert(id);//This return 'undefined'...

我拿不到身份证。如果我alert($('.Nouvelles[id^="F"]').first())返回一个对象。但如果我alert($('.Nouvelles[id^="F"]').first().attr('id'))返回未定义。如果在 Jquery 选择器中我特别要求 ID 以“F”开头的元素，如何取消定义 ID？

有人知道我错在哪里吗？

4

1 回答 1

2

由于您在 ajax 调用中添加项目，因此您的选择器没有在ready.

你会得到一个 jQuery 对象，它不包含任何元素，但会提醒一个对象并且没有 id 属性。

做一个console.log($('.Nouvelles[id^="F"]').first().attr('id'))检查对象。alert 不应该用于调试。

于 2013-07-30T15:32:04.377 回答