[英]HTML anchor tag's onclick attribute does not call javascript function
[英]Javascript to show anchor tag title attribute in modal onclick
只是想知道您是否可以在這里為我指明正確的方向。 我有此PHP代碼,並希望能夠在動態創建的鏈接上使用onclick,以在帶關閉選項的模式窗口中顯示鏈接的標題。 有點像工具提示。 不想使用本機瀏覽器工具提示。 假設Java腳本是最好的嗎? 任何指針將不勝感激。
while ($row = $result->fetch_assoc())
{ ?>
<a style="font-size:16px;" ID="<? echo $row['ID'] ?>" title="<?
echo $row ['title'] ?>
by
<? echo $row ['author'] ?>"><span title=""><? echo $row ['first_line'] ?>
</span></a>
<?
echo " ";
if ($count >= 6)
{
echo '<br /> ';
$count = 0;
} else {
$count++; }
}
在鏈接中添加一個類(例如,“ alertTitle”)。 然后,如果我的問題正確的話,這是可以幫助您的JS:
var els = document.getElementsByClassName('alertTitle');
// Add event listener to each
for (var i = 0; i < els.length; i++){
els[i].onclick = function(){
window.alert(this.title); // You could do anything with this.title
}
這是工作示例: JSFiddle
您可以使用bootstrap或其他css / js框架顯示模式並自定義模式顯示方法,如下所示:
`http://jsfiddle.net/saeedsalehi/1aeur58f/665/`
使用事件監聽器$('a').on()
:
var modal = $('#my-modal'); $('a').on('click', function() { var title = $(this).attr('title'); modal.find('.modal-title').text(title); $('#my-modal').modal('show'); });
<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> <a href="#1" id="1" title="Title 1">Link 1</a><br/> <a href="#2" id="2" title="Title 2">Link 2</a><br/> <a href="#3" id="3" title="Title 3">Link 3</a><br/> <div id="my-modal" 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 class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.