不知道爲什麼我可以抓住一個對象的HTML，但沒有屬性

Question

目前我有它的工作方式不是我想要的方式。我目前正在抓取當前對象的html並通過switch語句傳遞它。我想抓住屬性或數據名稱，如果可能的話，我相信它是我不知道。我會做一個jsfiddle，但我無法弄清楚如何使用基礎框架和ajax調用。 我感謝任何幫助。

問題出在函數showMsg（）下的javascript中。該變量被分配給var名稱'k'。你可以看到它正在選擇事件對象的html。當我嘗試使用屬性選擇器時，它返回未定義的錯誤。

這裏是正在使用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文件叫我jack.hmtl文件：

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