Javascript jquery/js closest（）.attr（）返回未定义的_Javascript_Jquery_Html_Css

Javascript jquery/js closest（）.attr（）返回未定义的

javascript jquery html css

Javascript jquery/js closest（）.attr（）返回未定义的,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我最近才开始学习JS、jQuery、HTML和CSS。现在我正试图使我的页面，当一个类别类被点击时，动画，然后重定向到点击项目的链接我四处查看了很多，找到了.closest（selector）.attr（'href'）对象或父对象。我两个都试过了，但是我一直没有定义linkto HTML: 知道为什么linkto总是返回未定义的吗？链接的html文件（programs.html）与我将要访问的页面位于同一目录中，因此我真的不知道出了什么问题。您的html无效li只能是ul的子级使用或在动

我最近才开始学习JS、jQuery、HTML和CSS。现在我正试图使我的页面，当一个类别类被点击时，动画，然后重定向到点击项目的链接

我四处查看了很多，找到了

.closest（selector）.attr（'href'）

对象或父对象。我两个都试过了，但是我一直没有定义

linkto

HTML:

知道为什么

linkto

总是返回未定义的吗？链接的html文件（programs.html）与我将要访问的页面位于同一目录中，因此我真的不知道出了什么问题。

您的html无效

li

只能是

ul

的子级

使用

或

在动画回调

中，这个是mainCon
元素。用于查找祖先元素，但在您的情况下需要查找后代元素，因此请使用
注意：您的html无效，li
不能是anchor
元素的子元素
您可以简单地使用
var linkto = $(this).children('a').attr('href');

而不是
var linkto = $(this).closest('a').attr('href');

$（'.mainCon'）。在下面使用$（this）时，（this）对象和$（'.category'）（this）对象是不同的
这意味着您在
而不是

<!DOCTYPE html>
    <html>
        <head>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
            <script>
                $(document).ready(function () {
                    $('.category').click(function () {
                         // $(this) ==  $('.category')
                        $('.mainCon').animate({
                            right: '100px',
                            opacity: '0',
                        }, 500, function () {
                            // $(this) ==  $('.mainCon')
                            var linkto = $(this).find('a').attr('href');
                            /*  alert($(this).find('a').attr('href')); return false; */
                            location.href = linkto;
                        })
                        return false;
                    });
                });
            </script>
        </head>
        <body>

            <div class="col-sm-4">
                <div class="mainCon">
                    <a href="programs.html">
                        <li class="category">
                            <img style="height: 150px;" src="programs.png" /><br /> 
                            Programs
                        </li>
                    </a>
                </div>

        </body>
    </html>


$（文档）.ready（函数（）{
$（'.category'）。单击（函数（）{
//$（this）=$（'.category'）
$（'.mainCon'）。设置动画({
右：‘100px’，
不透明度：“0”，
}，500，函数（）{
//$（this）=$（'.mainCon'）
var linkto=$（this.find（'a'）.attr（'href'）；
/*警报（$（this.find（'a'）.attr（'href'））；返回false*/
location.href=linkto；
})
返回false；
});
});
您也可以使用.find（）
var link=$（this.find（'a'）。attr（'href'）
您的HTML无效li
只能是ul
的子级，请这样做location.href=$（this）.children（'a'）.attr（'href'）并按照上述建议更正html欢迎使用StackOverflow！请看，共识是“不，他们不应该”。
$('.category').click(function() {
    var self = $(this); 
    self.closest('.mainCon').animate({
        right: '100px',
        opacity: '0',
    }, 500, function() {
        var linkto = $(this).find('a').attr('href');
        location.href= linkto;
    })
    return false;
})

$('.category').click(function() {
    $('.mainCon').animate({
        right: '100px',
        opacity: '0',
    }, 500, function() {
        var linkto = $(this).find('a').attr('href');
        location.href= linkto;
    })
    return false;
});

var linkto = $(this).children('a').attr('href');

var linkto = $(this).closest('a').attr('href');

$('.mainCon').animate()

<!DOCTYPE html>
    <html>
        <head>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
            <script>
                $(document).ready(function () {
                    $('.category').click(function () {
                         // $(this) ==  $('.category')
                        $('.mainCon').animate({
                            right: '100px',
                            opacity: '0',
                        }, 500, function () {
                            // $(this) ==  $('.mainCon')
                            var linkto = $(this).find('a').attr('href');
                            /*  alert($(this).find('a').attr('href')); return false; */
                            location.href = linkto;
                        })
                        return false;
                    });
                });
            </script>
        </head>
        <body>

            <div class="col-sm-4">
                <div class="mainCon">
                    <a href="programs.html">
                        <li class="category">
                            <img style="height: 150px;" src="programs.png" /><br /> 
                            Programs
                        </li>
                    </a>
                </div>

        </body>
    </html>