[英]jQuery don't see my id
這是我的html(modal)
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div id="modal-text" class="modal-body">
<p id="modalMessage"> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
這是我的jQuery
$('a[href="#myModal"]').click(function () {
if ($("#TermsConditions")) {
$("#modal-title").html(`<h4>` + "Terms Conditions" + `</h4>`);
$("#modalMessage").html(`<p>` + "message" + `</p>`);
}
else if ($("#Cookies")) {
$("#modal-title").html(`<h4>` + "Cookies" + `</h4>`);
$("#modalMessage").html(`<p>` + "message2" + `</p>`);
}
else {
$("#modal-title").html(`<h4>` + "Privacy Policy" + `</h4>`);
$("#modalMessage").html(`<p>` + "message3" + `</p>`);
}
})
我單擊鏈接時應打開模態,當我單擊鏈接時,模態應顯示所選鏈接(id)的一些標題和文本,它看起來像那樣(圖片)
它只是寫“消息” ...
這是我鏈接的代碼
<ul class="list-unstyled list-inline gray">
<li class="footerDistance" style="display:inline;"><a data-target="#myModal" data-toggle="modal" href="#myModal" id="TermsConditions">Terms&Conditions</a></li>
<li class="footerDistance" style="display:inline;"><a data-target="#myModal" data-toggle="modal" href="#myModal" id="Cookies">Політика Cookies</a></li>
<li class="footerDistance" style="display:inline;"><a data-target="#myModal" data-toggle="modal" href="#myModal" id="PrivacyPolicy">Політика Конфіденційності</a></li>
</ul>
請幫助!
做起來更簡單。
$("#TermsConditions").click(function(){...});
$("#Cookies").click(function(){...});
...
您正在嘗試通過ID為“ modal-tile”的元素來獲取元素,但在html中沒有ID為“ modal-title”的元素
$("#modal-title").html(`<h4>` + "Privacy Policy" + `</h4>`);
<h4 class="modal-title"></h4>
我認為您需要將代碼更改為
<h4 class="modal-title" id="modal-title"></h4>
另外,您可以像這樣更改click方法:
$('a[href="#myModal"]').click(function () {
var clickedAnchorId = $(this).attr('id');
if (clickedAnchorId === "TermsConditions") {
$("#modal-title").html(`<h4>` + "Terms Conditions" + `</h4>`);
$("#modalMessage").html(`<p>` + "message" + `</p>`);
}
else if (clickedAnchorId === "Cookies") {
$("#modal-title").html(`<h4>` + "Cookies" + `</h4>`);
$("#modalMessage").html(`<p>` + "message2" + `</p>`);
}
else {
$("#modal-title").html(`<h4>` + "Privacy Policy" + `</h4>`);
$("#modalMessage").html(`<p>` + "message3" + `</p>`);
}
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.