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

Question

I am writing an application in JQTouch, and am using a big red button 我正在JQTouch中编写一个应用程序，并使用一个大红色按钮

<a href="#" class="redButton">Red</a>

I am using PHP to dynamically build the JQT page with multiple divs. 我正在使用PHP动态构建具有多个div的JQT页面。 The app is a server management console that gets data from MySQL. 该应用程序是一个从MySQL获取数据的服务器管理控制台。 My idea is that I use a While loop to make a div for each server returned in the MySQL query, and each div will have a delete server button(the big red button). 我的想法是我使用While循环为MySQL查询中返回的每个服务器创建一个div，每个div都有一个删除服务器按钮（大红色按钮）。 I have to call the dame bit of code because of the whole dynamic page generating thing. 因为整个动态页面生成的东西，我必须调用dame位代码。 So I was wondering if there was a way I could have the onClick function that I call with the button Red know what div the button is in that is calling the function. 所以我想知道是否有一种方法可以让我用按钮调用onClick函数Red知道按钮所在的div是调用函数。 There will be a button in multiple divs that call the same code, but i have to know WHAT server to delete. 在多个div中会有一个调用相同代码的按钮，但我必须知道要删除的服务器。 Any suggestions? 有什么建议么？

Here is the full source code. 这是完整的源代码。

<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

add a data attribute to your "Big Red Button" as follows 将数据属性添加到“Big Red Button”，如下所示

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

and from your handling code retrieve the data value as follows 并从您的处理代码中检索数据值，如下所示

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

Then you can do your condition logic. 然后你可以做你的条件逻辑。

Answer 2

DevZer0's answer is probably what you want to go with but an alternative approach is to add a class to the containing div like DevZer0的答案可能就是你想要的，但另一种方法是将类添加到包含的div中

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

Then you can do this in your callback 然后你可以在你的回调中做到这一点

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

to get the id of the containing div. 获取包含div的id。

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

问题描述

2 个解决方案

解决方案1
1 2013-07-11 03:22:27

解决方案2
1 2013-07-11 03:41:29

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

问题描述

2 个解决方案

解决方案1 1 2013-07-11 03:22:27

解决方案2 1 2013-07-11 03:41:29

解决方案1
1 2013-07-11 03:22:27

解决方案2
1 2013-07-11 03:41:29