Question

我正在做新闻提要，就像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'))它返回undefined。如果在Jquery选择器中我特别要求具有以'F'开头的ID的元素，那么id如何取消定义？

有人知道我哪里错了吗？

Answer 1

由于您要在ajax调用中添加项目，因此您的选择器未在ready上获取任何元素。

您将获得一个jQuery对象，该对象不包含任何元素，但会提醒对象并且没有id属性。

执行console.log($('.Nouvelles[id^="F"]').first().attr('id'))并检查对象。警告不应该用于调试。

JQuery选择器返回undefined

1 个答案: