javascript - 不知道为什么我可以抓取对象的 html 但不能抓取属性

Question

目前我的工作方式只是没有按照我想要的方式工作。我当前正在获取当前对象的 html 并通过 switch 语句传递它。如果可能的话，我想获取属性或数据名称，我确信这是我无法弄清楚的。我本来想制作一个 jsfiddle，但我不知道如何使用基础框架和 ajax 调用来做到这一点。我感谢所提供的任何帮助。

问题出在函数 showMsg() 下的 javascript 中。该变量被分配给变量名称“k”。正如你所看到的，它当前正在选择事件对象的 html。当我尝试使用属性选择器时，它返回未定义的错误。

这是我的 jack.hmtl 文件，正在使用 ajax 调用

<section class="jack">
<ul>
    <li data-id="1" attr="1"><button class="button select" data-id="1" attr="1">Select me-1</button></li>
    <li data-id="2" attr="2"><button class="button select" data-id="2" attr="2">Select me-2</button></li>
    <li data-id="3" attr="3"><button class="button select" data-id="3" attr="3">Select me-3</button></li>
</ul>
</section>

我的 JavaScript 文件:

function borderAnimation(){
var cnt = $(".content"),
    body = $('body'),
    page = '',
    cntToggle = 'off';
cnt.hide();
var loadBoarder = {
    jack: function(){
        var that = $(this);
        that.css('background', 'red');
    },
    borderAni: function(){
        body.css({borderLeftWidth: "0px",
                      borderTopWidth: "0px",
                      borderRightWidth: "0px",
                      borderBottomWidth: "0px"
        });
        body.animate({borderLeftWidth: "6em",
                      borderTopWidth: "6em",
                      borderRightWidth: "6em",
                      borderBottomWidth: "6em"
        }, loadBoarder.displayBtn);
    },
    displayBtn: function(){
        $.ajax('jack.html', {
            url: 'jack.html',
            success: function(response){
                var ctr = $(".container");
                ctr.append(response);
                ctr.find("button").first().fadeOut();
                loadBoarder.eatJack();
            },
            error: function(){
                alert("ERROR WITH AJAX");
            }
        });//END OF AJAX CALL
    },
    closeButton: function(){
        cnt.animate({left: "-2000px"});
        cnt.fadeOut();
        $('.jack ul').find('li').removeClass('active');
    },                                                                              
    showMsg: function(){
        var k = $(this).html(),
            **//--- want to use $(this).attr(), ---\\**
            lop = $(this).parent().offset(),
            arrowPos = (lop.left),
            arrow = $(".arrow-up");
            console.log(k);
        loadBoarder.loadImages();
        if($(this).parent().hasClass('active')){
            return false;
        }
        else{
            cnt.show();
            $(".jack").find('li').removeClass('active');
            var ani = function(){
                cntToggle = 'on';
                if(cnt.css('left') === '0px'){
                    cnt.animate({left: "-2000px"}, "easeout");
                    cnt.animate({left: '0'}, "easein");
                }
                else{
                    cnt.animate({left: '0'});
                }
            };
            var arrowAni = function(){
                arrow.hide();
                arrow.css({top: '20px', left: arrowPos+"px"});
                arrow.fadeIn();
                arrow.delay(200).animate({top: '-20px', left: arrowPos});
                $(this).parent().addClass('active');
            };
            var aniArrow = function(){
                arrow.css({top: '20px', left: arrowPos+"px"});
                arrow.css({top: '-20px', left: arrowPos+"px"});
            };
            switch(k) {
                case "Select me-1":
                $('.ss').hide();
                $('.one').show();
                page = 'one';
                    if($(this).parent().hasClass('active')){
                        aniArrow();
                        $('.jack');
                    }else{
                        $(this).parent().addClass('active');
                        arrowAni();
                        ani();
                    }
                break;
                case "Select me-2":
                    $('.ss').hide();
                    $('.two').show();
                    page = 'two';
                    if($(this).parent().hasClass('active')){
                        aniArrow();
                        $('.jack');
                    }else{
                        $(this).parent().addClass('active');
                        arrowAni();
                        ani();
                    }
                break;
                case "Select me-3":
                    $('.ss').hide();
                    $('.three').show();
                    page = 'three';
                    if($(this).parent().hasClass('active')){
                        aniArrow();
                        $('.jack');
                    }else{
                        $(this).parent().addClass('active');
                        arrowAni();
                        ani();
                    }
                break;
            }
        }
    },
    eatJack: function(){
        console.log("REALY SLOW");
        var listItems = $('.jack ul').find('li'),
            item = listItems.find("button"),
            items = [];
        listItems.each(function(){
            items.push($(this));
            item.css({marginTop: "250px"});
            item.animate({marginTop: "0"}, "easeOutBounce");
        });
    },
    loadImages: function(){

    }
   };//END OF loadBorder OBJECT

     // EVENTS
     $('body').on('click', ".select", loadBoarder.showMsg);
     $('button').on('click', loadBoarder.borderAni);
     $('body').on('click', '.close', loadBoarder.closeButton);
}

   //WHEN DOCUMENT IS FINSHED LOADING EXECUTE THIS FUNCTION
   $(function() {
         borderAnimation();
   });

Answer 1

首先，jquery 函数 attr 需要一个参数，其次，attr 不是元素属性。我将更改您的列表项和按钮以使用 rel 而不是 attr (如果这不与其他任何内容冲突)，然后该变量的 js 将是:

var k = $(this).attr('rel')