Cách làm mỗi modal ứng với mỗi phần tử === ## Cách 1: ```javascript= <section id="section-recurement"> {% set tuyenDungs = Recurements() %}; <div class="recruiement"> {% for item in tuyenDungs %} <div class="job-title" data-id="{{loop.index0}}">{{item.title}}</div> {% endfor %} </div> {% for item in tuyenDungs %} <div class="modal" id="modal-recurement-{{loop.index0}}"> <div class="modal-title">{{item.title}}</div> <div class="modal-content">{{item.content}}</div> </div> {% endfor %} </section> <script> $('.job-title').click(function() { var id = $(this).data('id'); var selector = '#modal-recruiement-' + id; $(selector).modal() }) </script> ``` --- ## Cách 2: ```javascript= <section id="section-recurement"> {% set tuyenDungs = Recurements() %}; <div class="recruiement"> {% for item in tuyenDungs %} <div class="job-title" data-conent="{{item.content}}">{{item.title}}</div> {% endfor %} </div> <div class="modal" id="modal-recurement"> <div class="modal-title"></div> <div class="modal-content"></div> </div> </section> <script> $('.job-title').click(function() { var title = $(this).text(); var content = $(this).data('content'); $("#modal-recurement .modal-title").text(title); $("#modal-recurement .modal-content").text(content); $("#modal-recurement").modal() }) </script> ``` --- ## Cách 3: ```javascript= <section id="section-recurement"> {% set tuyenDungs = Recurements() %}; <div class="recruiement"> {% for item in tuyenDungs %} <a href="javascript:;" onclick="showRecruimentModal({{loop.index0}})"> <div class="job-title">{{item.title}}</div> </a> {% endfor %} </div> <div class="modal" id="modal-recurement"> <div class="modal-title"></div> <div class="modal-content"></div> </div> </section> <script> var recruiement = {{tuyenDungs | json_encode | raw}}; funtion showRecruimentModal(index){ var item = recruiement[index]; $("#modal-recurement .modal-title").text(item.title); $("#modal-recurement .modal-content").text(item.content); $("#modal-recurement").modal() } </script> ```
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up