Question

我正在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 + '&hellip;  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>

Answer 1

将数据属性添加到“Big Red Button”，如下所示

<a href="#" class="redButton" data-server="serverval">Red</a>

并从您的处理代码中检索数据值，如下所示

var server = $(this).attr('data-server');

然后你可以做你的条件逻辑。

Answer 2

DevZer0的答案可能就是你想要的，但另一种方法是在包含div中添加一个类，如

echo '<div id="'.$friendlyName_noSpaces2.'" class="server">';

然后你可以在你的回调中做到这一点

var server = $(this).closest(".server").attr("id");

获取包含div的id。

<按钮>相同按钮，多个位置，不同代码</button>

2 个答案: