如何通过单击按钮显示 div 的值？答案

【问题标题】：How can I display value of a div with a button click?如何通过单击按钮显示 div 的值？
【发布时间】：2012-08-08 07:47:43
【问题描述】：

我目前正在使用 wmd 编辑器和 jQuery-UI 选项卡。我创建了一个 ajax/js 函数，它将提交（单击下一个按钮时）wmd-preview 值，然后 php 在选项卡 2 中回显结果。问题是我没有显示任何结果。我不是在寻找 textarea 值，而是 div #wmd-preview 值。如何通过我的 ajax/函数显示 div wmd-preview 的值？

<script>
$(function () {
    var $tabs = $('#tabs').tabs({
        disabled: [0, 1],
        select: function () {
            $.ajax({
                type: "POST",
                url: "post_tabs.php",
                data: {
                    "wmd": $("#wmd-preview").val(),
                },
                success: function (result) {
                    $("#tab-2").html(result);
                }
            });
        }
    });

    $(".ui-tabs-panel").each(function (i) {
        var totalSize = $(".ui-tabs-panel").size() - 1;
        if (i != totalSize) {
            next = i + 2;
            $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
        }
        if (i != 0) {
            prev = i;
            $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
        }
    });

    $('.next-tab').click(function () {
        var currentTab = $('#tabs').tabs('option', 'selected');
        if (
        (
        currentTab == 0 && /*(B)*/
        $.trim($('#wmd-input').val()).length > 0
        )
        ) {
            var tabIndex = $(this).attr("rel");
            $tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1]);
        } else {
            switch (currentTab) {
            case 0:
                alert('Please fill out all the required fields.', 'Alert Dialog');
                break;
            }
        }
        console.log("preventing default");
        return false;
    });

    $('.prev-tab').click(function () {
        var tabIndex = $(this).attr("rel");
        $tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1]);
        return false;
    });

});
</script>

PHP

<?
if (isset($_POST['wmd'])){
    $wmd = $_POST['wmd']; 
    echo ('<div id="text_result"><span class="resultval"><h2>Textarea Echo result:</h2>'.$wmd.'</span></div>');
                       }
?>

HTML

<div id="tab-1" class="ui-tabs-panel ui-tabs-hide">
    <div id="wmd-button-bar"></div>
    <textarea id="wmd-input" name="wmd-input" cols="92" rows="15" tabindex="6"></textarea>
    <div id="wmd-preview"></div>
</div>

<div id="tab-2" class="ui-tabs-panel ui-tabs-hide">

</div>

【问题讨论】：

问题是您正在禁用选项卡。禁用选项卡实质上会删除单击功能。如果是这种情况，那么您的 select 方法将永远无法触发。也许您想重新考虑您的设计？
@Ohgodwhy，我使用常规输入字段具有相同的功能。
您正在使用$("#wmd-preview").val(), ..您应该在输入字段上使用val() 并在div等上使用html() ..这种情况下正确的是$("#wmd-input").val()-这是正确的选择，因为它更好地反映了现实。预览取决于用户输入以外的更多内容 - 您不希望这样。

标签： php javascript jquery ajax jquery-ui

【解决方案1】：

PHP 代码应以 <?php 开头，您的代码应以 <? 开头，这是不正确的。

当您看到以文本形式显示的 PHP 代码时 - 它应该告诉您它没有运行，这就是为什么您不断得到像 '.$wmd.''); } ?> 这样的输出，而不是真正的 PHP 回显输出。

另一条评论仍然有效 - 您应该使用 $("#wmd-preview").html() 或 $("#wmd-input").val() 但您不能在 div 上使用 val，它不起作用。

在这种情况下，$("#wmd-input").val() 是更好的选择，因为这是存在 input 字段的原因 - 获取输入。

如果还有其他问题可以提供帮助，请告诉我。

【讨论】：

完美，谢谢。我不知道，但现在我明白你提出的逻辑了。