루핑 값을 부트 스트랩 모달로 전달하는 방법은 무엇입니까?

Question

서문 : 변수를 부트 스트랩 모달로 전달하는 것에 대한 해답을 살펴 보았습니다. 그들은 내 문제를 해결하지 못하는 것 같습니다. 나는 이미지 URL 및

[{ 
    URL:"www.imageurl.com/image1.jpg", 
    COMMENTS:[ 
      {comment: "Hello", by: "Jane"}, 
      {comment: "World", by: "John"} 
    ] 
},{ 
    URL:"www.imageurl.com/image2.jpg", 
    COMMENTS:[ 
      {comment: "Ruby", by: "Ann"}, 
      {comment: "Is Better", by: "Luke"} 
    ] 
}] 

이 그러니까 ...

같은 그 이미지에 대한 의견의 배열을 가지고있는 JSON 객체를 반복하고있어

는 Node.js를 애플 리케이션 그래서 옥에 쓰고있다 , 명확하게하기 위해 HTML을 참조하겠습니다. 따라서 JSON 객체 (이미지의 이미지 용)를 반복하고 각 이미지에 대해 태그를 모달을 여는 <a> 태그로 싸고 있습니다. 모달 안에 클릭 한 이미지에 대한 적절한 설명과 작성자를 표시하고 싶습니다. 그래서, "image in image"가 image1.jpg를 가리키고 있다면, 모달은 Jane, World - by John으로 Hello를 표시해야합니다.

제 문제는 제가 루프에 있는데 올바른 이미지 객체를 모달에 전달해야한다는 것입니다. 어떻게해야합니까?

Answer 1

<img> 또는 <a>에 의견을 추가해야합니다. 가장 쉬운 방법은 아마도 data- * 속성을 사용하는 것입니다. 당신의 클릭 이벤트에 다음

<img data-comments='[{"comment":"Hello","by":"Jane"},{"comment":"World","by":"John"}]'> 

(또는 docs에서 같은 show.bs.modal 이벤트를 사용)의 의견을 얻을 :
캐릭터 라인 화 JSON과 데이터 의견을 넣어 <img>에 속성 대상 요소 :

는

$('.link-that-opens-the-modal').on('click', function(event) { 
    event.preventDefault(); 
    var clickedLink = $(event.currentTarget); 
    var currentImage = clickedLink.children('img'); // use .find() if necessary 

    // JSON should be automatically converted to an Object 
    var comments = currentImage.data('comments'); 

    // append image and comments to modal however you want and show modal 
    // ... 
});