2017-03-30 4 views
0

学生はここに!だから私は$.ajax要求を実行する関数を作成し、各項目について、私はDOMにhtmlを出力します。まあ、それをチェックアウト:リンクをクリックするとサーバーから項目を表示する方法

function getLinks(){ 
    let blogLinks; 
    $.ajax(settings).then(function(data, status, xhr){ 
    data.forEach(function(item, i, arr){ 
     let id = item._id; 
     if (item.title){ 
     blogLinks = `<li><a class="link" href=#${item.title}>${item.title}</a></li>` 
     $($findUl).append(blogLinks); 
     } 
    }) 
    }) 
} 

このvarが、同様の便利な情報かもしれません:

let $blogViewAll = 
    $(`<div class="blog-view"> 
     <h3>Check Out These Blogs</h3> 
     <div class="column-1"> 
      <ul class="link-list"></ul> 
     </div> 
     <div class="column-2"></div> 
     </div>`); 

let $findUl = $($blogViewAll).find('.link-list'); 

私がそれをやりたい正確に何をやって、ページへのリンクを追加しています。今すぐリンクをクリックし、ページにメッセージ本文を表示したいと思います。だから私はこれを試しています:

$findUl.on('click', function(e){ 
    $.ajax(settings).then(function(data, status, xhr){ 
    data.forEach(function(item, i, arr){ 
     //since you clicked on that link 
     //I should look at what you clicked 
     //match it to the corresponding obj{item.body} 
     //and display it, but I don't know how to match and grab :(
    }) 
    }) 
}); 

それは私が立ち往生しているところです!助言がありますか?ありがとう!!!取得する

$findUl.on('click', function(e){ 
    // this gives you the DOM node that was clicked: 
    console.log(e.currentTarget); 
} 

少しショートカット: プロパティe.currentTargetを経由して、

+0

あなたのコードをdocument.readyで "クリック"してください –

答えて

1

あなたはユーザーがあなたの最初の引数eにクリック現在のリンクにアクセスすることができます(私は、ところで、小さな座サーバーを使用しています) jQueryのを使用してタイトル:

$findUl.on('click', function(e){ 
    var title = $(e.currentTarget).text(); 
} 

別のノートでは、あなたは本当に一度だけそのajaxの呼び出しでサーバーからデータをロードする必要がありますが、いないたびに何かがsである(クリックされましたルーウー)。

ページロード時にオブジェクトにデータをロードし、obejctプロパティを使用してDOMに追加することをお勧めします。あなたは将来のクリックハンドラーでその同じオブジェクトにアクセスすることができます

関連する問題