Question

当您点击＆＃39; METAR＆＃39;时，您可以看到here。按钮一个接一个地按下，单击下一个按钮时会再次出现上一个按钮。

但是，当您点击VATSIM＆＃39;上的“在线用户总数”时按钮，然后是其中一个“METAR”按钮。按钮，VATSIM＆＃39;＆＃39;按钮不再出现。

我的代码位于this Pastebin。

VATSIM＆＃39;在线用户总数的JavaScript按钮如下：

<script type="text/javascript">
$(document).ready(function() {
var userButtons = $('.getUserButtons');
userButtons.click(function(){
var clickedButton = $(this);
        $.ajax({
            type: "POST",
            url: "/online.php",
            dataType: 'html',
            success: function(data) {

                $('#outputDiv').hide('slow', function() {
                    $(this).remove();
                });

                userButtons.show('slow');

                var outputElement = $('<div id="outputDiv" style="color: white;">' + data + '</div>');
                outputElement.hide();
                outputElement.insertAfter(clickedButton);

                clickedButton.hide('slow', function() {
                    outputElement.show('slow');
                });
            },
            error: function(jqXHR) {
                alert(jqXHR.responseText);
            }
        });
    });
});
</script>

按钮本身的代码如下：

<li><button style="height: 40px;" class="btn btn-primary getUserButtons hvr-float-shadow">Total Users Online on VATSIM</button></li>

任何帮助将不胜感激。我想我需要编辑代码，以便点击其中一个＆＃39; METAR＆＃39;按钮然后告诉“VATSIM在线用户总数”＃39;重新出现;我不知道怎么回事。

谢谢！

Answer 1

将VATMIM上的getMetarButtons类添加到Online Users Online

Answer 2

最后解决了这个问题。这是：

script type="text/javascript">
$(document).ready(function() {

    var metarButtons = $('.getMetarButtons');
    var userButtons = $('.getUserButtons');

    metarButtons.click(function(){
        var clickedButton = $(this);
        $.ajax({
            type: "POST",
            url: "metarData.php",
            data: { location: clickedButton.attr('data-location') },
            dataType: 'json',
            success: function(data) {

                $('.metarOutput').hide('slow', function() {
                    $(this).remove();
                });

                $('#outputDiv').hide('slow', function() {
                    $(this).remove();
                });

                metarButtons.show('slow');
                userButtons.show('slow');

                var outputElement = $('<div id="outputDiv"' + data['location'] + ' style="color: white;" class="metarOutput">' + data['metar'] + '</div>');
                outputElement.hide();
                outputElement.insertAfter(clickedButton);

                clickedButton.hide('slow', function() {
                    outputElement.show('slow');
                });
            },
            error: function(jqXHR) {
                alert(jqXHR.responseText);
            }
        });
    });
});
</script>
<script type="text/javascript">
$(document).ready(function() {

    var metarButtons = $('.getMetarButtons');
    var userButtons = $('.getUserButtons');

    userButtons.click(function(){
        var clickedButton = $(this);
        $.ajax({
            type: "POST",
            url: "online.php",
            dataType: 'html',
            success: function(data) {

               $('.metarOutput').hide('slow', function() {
                    $(this).remove();
                });

                $('#outputDiv').hide('slow', function() {
                    $(this).remove();
                });

                metarButtons.show('slow');
                userButtons.show('slow');

                var outputElement = $('<div id="outputDiv" style="color: white;">' + data + '</div>');
                outputElement.hide();
                outputElement.insertAfter(clickedButton);

                clickedButton.hide('slow', function() {
                    outputElement.show('slow');
                });
            },
            error: function(jqXHR) {
                alert(jqXHR.responseText);
            }
        });
    });
});
</script>

单击后不会再出现HTML按钮

2 个答案: