<按钮>相同的按钮,多个位置,不同的代码
<button> Same Button, Multiple Locations, Different Code
我正在JQTouch中编写一个应用程序,并使用一个红色的大按钮
<a href="#" class="redButton">Red</a>
我正在使用PHP动态构建具有多个div的JQT页面。该应用程序是一个从MySQL获取数据的服务器管理控制台。我的想法是,我使用While循环为MySQL查询中返回的每个服务器创建一个div,每个div都有一个删除服务器按钮(红色的大按钮)。由于整个动态页面生成的事情,我不得不调用dame代码。所以我想知道是否有一种方法可以让我用按钮调用onClick函数红色知道调用函数的按钮在哪个div中。在多个调用相同代码的div中会有一个按钮,但我必须知道要删除哪个服务器。有什么建议吗?
这是完整的源代码。
<html>
<link rel="stylesheet" href="jq_touch/themes/css/jqtouch.css" title="jQTouch">
<script src="jq_touch/src/lib/zepto.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jq_touch/src/jqtouch.min.js" type="text/javascript" charset="utf-8"></script>
<!-- Uncomment the following two lines (and comment out the previous two) to use jQuery instead of Zepto. -->
<!-- <script src="../../src/lib/jquery-1.7.min.js" type="application/x-javascript" charset="utf-8"></script> -->
<!-- <script src="../../src/jqtouch-jquery.min.js" type="application/x-javascript" charset="utf-8"></script> -->
<script src="../../extensions/jqt.themeswitcher.min.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
icon4: 'jqtouch4.png',
addGlossToIcon: false,
startupScreen: 'jqt_startup.png',
statusBar: 'black-translucent',
themeSelectionSelector: '#jqt #themes ul',
preloadImages: []
});
// Some sample Javascript functions:
$(function(){
// Show a swipe event on swipe test
$('#swipeme').swipe(function(evt, data) {
var details = !data ? '': '<strong>' + data.direction + '/' + data.deltaX +':' + data.deltaY + '</strong>!';
$(this).html('You swiped ' + details );
$(this).parent().after('<li>swiped!</li>')
});
$('#tapme').tap(function(){
$(this).parent().after('<li>tapped!</li>')
});
$('a[target="_blank"]').bind('click', function() {
if (confirm('This link opens in a new window.')) {
return true;
} else {
return false;
}
});
// Page animation callback events
$('#pageevents').
bind('pageAnimationStart', function(e, info){
$(this).find('.info').append('Started animating ' + info.direction + '… And the link ' +
'had this custom data: ' + $(this).data('referrer').data('custom') + '<br>');
}).
bind('pageAnimationEnd', function(e, info){
$(this).find('.info').append('Finished animating ' + info.direction + '.<br><br>');
});
// Page animations end with AJAX callback event, example 1 (load remote HTML only first time)
$('#callback').bind('pageAnimationEnd', function(e, info){
// Make sure the data hasn't already been loaded (we'll set 'loaded' to true a couple lines further down)
if (!$(this).data('loaded')) {
// Append a placeholder in case the remote HTML takes its sweet time making it back
// Then, overwrite the "Loading" placeholder text with the remote HTML
$(this).append($('<div>Loading</div>').load('ajax.html .info', function() {
// Set the 'loaded' var to true so we know not to reload
// the HTML next time the #callback div animation ends
$(this).parent().data('loaded', true);
}));
}
});
// Orientation callback event
$('#jqt').bind('turn', function(e, data){
$('#orient').html('Orientation: ' + data.orientation);
});
});
</script><?php
//Connect
mysql_connect("localhost", "root", "root") or die(mysql_error());
//Make and store queries
mysql_select_db("servermgr") or die(mysql_error());
$result = mysql_query("SELECT * FROM servers")
or die(mysql_error());
//Echo some constant HTML
echo'<div id="serverset">';
echo'<div class="toolbar">';
echo'<h1>Servers Home</h1> ';
echo'</div>';
echo'<ul class="rounded">';
//Begin printing out MYSQL rows (List Items)
while($row = mysql_fetch_array( $result )) {
//$row_friendlyName = $_row['friendly_name']
$friendlyName_noSpaces = str_replace(' ', '_', $row[friendly_name]);
echo'<li class=""><a href="#'.$friendlyName_noSpaces.'">'.$row["friendly_name"].'</a></li>';
}
//Close list
echo'</ul>';
echo '</div>';
//Redo all previous queries to print out the divs
mysql_select_db("servermgr") or die(mysql_error());
$result2 = mysql_query("SELECT * FROM servers")
or die(mysql_error());
while($row2 = mysql_fetch_array( $result2 )) {
$friendlyName_noSpaces2 = str_replace(' ', '_', $row2[friendly_name]);
echo '<div id="'.$friendlyName_noSpaces2.'">';
echo'<div class="toolbar">';
echo'<h1>'.$row2[friendly_name].'</h1> ';
echo '<a href="#" class="back">Back</a>';
echo'</div>';
echo'<ul class="rounded">';
echo '<li>Friendly Name: '.$row2[friendly_name].'</li>';
echo '<li>IP Address: '.$row2[ip].'</li>';
echo '<li>Server Hostname: '.$row2[hostname].'</li>';
echo '<li>MAC Address: '.$row2[MAC].'</li>';
echo'</ul>';
echo'<button href="#" class="redButton">Red</button>';
echo'</div>';
}
//END OF PHP
?>
</body>
</html>
将数据属性添加到您的"大红色按钮"中,如下所示
<a href="#" class="redButton" data-server="serverval">Red</a>
并从您的处理代码中检索如下所示的数据值
var server = $(this).attr('data-server');
然后你可以做你的条件逻辑。
DevZer0的答案可能是您想要的,但另一种方法是向包含的div中添加一个类,如
echo '<div id="'.$friendlyName_noSpaces2.'" class="server">';
然后你可以在你的回调中这样做
var server = $(this).closest(".server").attr("id");
以获取包含的分区的id。
相关文章:
- jquery试图按名称获取按钮位置
- 更改后退按钮的指向位置
- 在TWebBrowser(谷歌地图)中显示位置,而无需单击按钮
- JavaScript幻灯片显示,每个幻灯片的下一个按钮都有不同的位置
- 当用户单击按钮(在光标位置)时,在输入字段中添加一个文本字符串
- 按下后退按钮时,如何保持可滚动区域的滚动位置
- 流星应用程序中的按钮位置错误
- 获得点击按钮的正确位置(涟漪效应)
- HTML 按钮以在页面上的其他位置提交表单
- 使用地理位置创建一个显示我当前位置的按钮
- 当我使用html5画布单击按钮时,要更改矩形的位置
- 我希望每次单击按钮时都能将每张图片更改为显示在屏幕上的同一位置
- 点击一个按钮,谷歌地图应该至少适合3个离你当前位置点最近的标记
- 使用Window_handles在位置弹出窗口中单击按钮,并带有守夜功能
- 为什么jqueryUI按钮和按钮集的位置不同
- 创建存储按钮单击位置的数组
- 浏览器的“上一个”按钮位置更改
- 导出按钮位置更改 IE 11 中的高图表
- 如果按钮位置发生变化,ZClip SWF不会与按钮位置对齐
- 浏览器后退按钮位置问题