Question

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

我经常环顾四周并得到了.closest(selector).attr('href')的东西或父母的东西。我试过了两个，我只是不确定linkto

HTML：

<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>

JS：

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

知道为什么linkto总是返回undefined？链接的html文件（programs.html）与我将要来自的页面位于同一目录中，所以我真的不知道错误。

Answer 1

您的HTML无效。 li只能是ul的孩子，

使用

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

OR

$('.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;
})

Answer 2

动画回调this内部是mainCon元素。 .closest()用于查找祖先元素，但在您的情况下，您需要查找后代元素，因此请使用.find()

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

注意：您的HTML无效，li不能是anchor元素的子元素

Answer 3

你可以简单地使用

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

而不是

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

Answer 4

$（＆＃39; .mainCon＆＃39）。（this）object和$（＆＃39; .category＆＃39;）（this）对象不同，当你在

下使用$（this）时

$('.mainCon').animate()

表示您在<div class="mainCon">而不是<li class="category">

<!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>

Answer 5

您也可以使用.find（）。

var link = $(this).find('a').attr('href')

jquery / js nearest（）。attr（）返回undefined

5 个答案: