jQuery與.data和html5數據屬性自定義函數

當我點擊一個按鈕時，我試圖給我的「AppList」附加一個新的「應用程序」。jQuery與.data和html5數據屬性自定義函數

$(".appCreate").click(newApp); 

function newApp() { 
    var facebookTemp = $("#facebook-template").html(); 

    var appName = $(this).data("appName"); 
    var appSize = $(this).data("appSize"); 
    var appTemp = $(this).data("appTemp"); 

    $("<div class=\"app" + appName + appSize + "\"></div>").html(appTemp).appendTo(".AppList"); 
};

HTML

<body> 

    <section id="AppBox"> 
     <div class="AppList"> 

<!-- == Facebook == --> 
      <div id="facebook-template"> 
       <div class="App facebook Size170x290"> 
        <h1>Hello Test</h1> 
       </div> 
      </div> 
     </div> 
    </section> 

<!-- == Settings == --> 
    <section id="dialog-settings" class="dialog" title="Settings"> 
     <button data-appName="facebook" data-appSize="Size170x290" data-appTemp="facebookTemp" class="appCreate"> 
     Facebook</button> 
    </section> 
</body>

CSS

#facebook-template { 
    display: none; 
} 
.facebook { 
    background:linear-gradient(to bottom, #133783 0px, #102E6D 100%) repeat scroll 0 0 #133783; 
} 
.facebook { top:120px; left:0; } 
#AppBox { 
    position:fixed; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    margin:0; 
} 
.AppList { 
    position:absolute; 
    height:100%; 
    width:100%; 
    margin:0; 
    padding:0; 
} 
.App { 
    position:absolute; 
    display:block; 
    margin:5px; 
    padding:0; 
    box-shadow:0 0 5px 1px black; 
    color:#FFFFFF; 
    cursor:move; 
} 
.Size170x290 {height:170px;width:290px;}

基本上事情不是showi嗯，我不知道是什麼原因造成的。

來源

2013-04-21 ChristopherStrydom

我希望得票的人需要發表評論。你提供了代碼。 – 2013-04-21 12:04:11

你的html中的'.AppList'在哪裏？ – 2013-04-21 12:06:19

在您的HTML中是否存在具有類AppList的元素？看起來不是。 – lib3d 2013-04-21 12:06:46

您丟失了點擊處理程序的上下文。

這是一個明顯的第一個錯誤：

$(".appCreate").click(newApp);

第二個錯誤是數據名稱。更改爲：

var appName = $(this).data("appname");

通知的情況下。將所有名稱轉換爲小寫。

由於評論中的對話，我還添加了handlebars.js。

新的工作代碼：

$(".appCreate").click(newApp); 

function newApp() { 
    var facebookTemp = $("#facebook-template").html(); 

    var appName = $(this).data("appname"); 
    var appSize = $(this).data("appsize"); 
    var appTemp = $(this).data("apptemp"); 

    var template = Handlebars.compile(facebookTemp); 
    var html = template({ 
     app : appName, 
     facebook : appTemp, 
     size : appSize 
    }); 

    $(".AppList").append(html); 
};

直播DEMO && CODE。

來源

2013-04-21 12:08:03

點擊功能仍然有效，但這是一個更好的方法。這並沒有解決我的問題。我現在將添加更多的HTML代碼 – ChristopherStrydom 2013-04-22 15:02:57

感謝您的答案，但:) – ChristopherStrydom 2013-04-22 15:10:22

編輯該帖子來解決其他問題。 GL :) – 2013-04-22 15:47:07

jQuery與.data和html5數據屬性自定義函數

回答

相關問題