javascript - 如何管理从多个按钮打开 "same jquery ui dialog"

Question

我有 2 个按钮，一个将打开对话框并对其 <div> 进行一些更改，而不会打开任何对话框，它只会在其 <DIV> 内进行一些样式更改

我将有多个 <DIV>s 实例，其中包含这 2 个按钮，这些 <DIV>s 将在运行时生成，因此可以有“N”个按钮。

我创建了 FIDDLE 来演示我的代码:http://jsfiddle.net/aasthatuteja/ZtLEq/

现在，对于“不”生成对话框的按钮，我可以通过捕获其“.closest ('parent div')”使用 jquery 进行更改，然后单击此特定按钮，它仅对其父级 <DIV> 进行更改。

但问题是:对于生成对话框的按钮，我不确定单击哪个按钮会生成对话框，因此在提交时我不确定应该影响哪个特定的父级 <Div>。

下面是我的代码:

HTML

<div id="content-1" class="content">
    <div class="rx-container"> <span title="Accept" class="Accepted">Accept</span>

        <br>
        <br> <span title="Reject" class="Rejected">Reject</span>

        <div class="rx-statusMessage">
            <br>
            <br>
            <p class="rx-statusAccepted nodisplay">Accepted</p>
            <p class="rx-statusRejected nodisplay">Rejected</p>
            <div class="rejectReasonBox nodisplay">Reason: <span>Incorrect Label Applied</span>

            </div>
        </div>
    </div>
</div>
<div id="content-2" class="content">
    <div class="rx-container"> <span title="Accept" class="Accepted">Accept</span>

        <br>
        <br> <span title="Reject" class="Rejected">Reject</span>

        <div class="rx-statusMessage">
            <br>
            <br>
            <p class="rx-statusAccepted nodisplay">Accepted</p>
            <p class="rx-statusRejected nodisplay">Rejected</p>
            <div class="rejectReasonBox nodisplay">Reason: <span>Incorrect Label Applied</span>

            </div>
        </div>
    </div>
</div>
<div id="content-3" class="content">
    <div class="rx-container"> <span title="Accept" class="Accepted">Accept</span>

        <br>
        <br> <span title="Reject" class="Rejected">Reject</span>

        <div class="rx-statusMessage">
            <br>
            <br>
            <p class="rx-statusAccepted nodisplay">Accepted</p>
            <p class="rx-statusRejected nodisplay">Rejected</p>
            <div class="rejectReasonBox nodisplay">Reason: <span>Incorrect Label Applied</span>

            </div>
        </div>
    </div>
</div>
<div id="rejectReason" title="Reason">
    <p>Please provide the reason for cancelling the session.</p>
    <div class="inputRow">
        <textarea id="rejectReasonBox" class="reasonBox">Incorrect Label Applied</textarea>
    </div>
</div>

JQUERY

    $(document).ready(function () {

    function aceeptMethod() {
        var $parent = $(this).closest('.rx-container');

        $('.rx-statusRejected', $parent).hide();
        $('.rx-statusAccepted', $parent).show();
        $('.rejectReasonBox', $parent).hide();
        $('.k-tabstrip-items .k-state-default .k-link', $parent).css('color', '#7ea700');
        $('.k-tabstrip .k-state-active', $parent).css('border-color', '#7ea700');
        $('.k-tabstrip-items .k-state-active, .k-tabstrip .k-content.k-state-active', $parent).css('background-color', '#f5f5e9');


        $(this).attr("title", "Accepted");
        $(this).next().attr("title", "Reject");

        $(this).removeClass('Accepted');
        $(this).addClass('disableAccepted');
        $(this).next().removeClass('disableRejected');
        $(this).next().addClass('Rejected');

        checkIfAccepted();
    }

    function rejectMethod() {
        $('.k-tabstrip-items .k-state-default .k-link').css('color', '#ff0000');
        $('.k-tabstrip .k-state-active').css('border-color', '#ff0000');
        $('.k-tabstrip-items .k-state-active,#content-1 .k-tabstrip .k-content.k-state-active').css('background-color', '#f5e9e9');
        $('.rx-statusRejected').show();
        $(".rx-statusAccepted").hide();
        $(".rejectReasonBox").show();

        $('.Rejected').attr("title", "Rejected");


        $('.Rejected').prev().attr("title", "Accept");
        $('.Rejected').addClass('disableRejected');
        $('.disableRejected').prev().addClass('Accepted');
        $('.disableRejected').prev().removeClass('disableAccepted');
        $('.disableRejected').removeClass('Rejected');
        checkIfRejected();
    }



    $("#rejectReason").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            "Submit": function () {
                $(this).dialog("close");
                rejectMethod();
            },
                "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });


    $(".Accepted").click(aceeptMethod);
    $(".Rejected").click(function () {
        $("#rejectReason").dialog("open");
    });


    function checkIfAccepted() {
        if ($(".rx-statusAccepted:visible").length == $(".rx-statusAccepted").length) {
            $('#authorizeOrderButton').prop('disabled', false);
            $('#authorizeOrderButton').removeAttr("disabled");
            $('#authorizeOrderButton').removeClass("greyButton");
        }
    }

    function checkIfRejected() {
        if ($(".rx-statusAccepted:visible").length <= $(".rx-statusAccepted").length) {
            $('#authorizeOrderButton').attr("disabled", "disabled");
            $('#authorizeOrderButton').addClass("greyButton");
        }
    }

});

请推荐!

如果您需要更多信息或情况不明，请告诉我。

谢谢!

Answer 1

可能最简单的方法是利用闭包和点击事件的 target 参数。

与其定义对话框并稍后在其上调用“打开”，不如在实际需要在单击事件中打开对话框时调用它，如下所示:

$(".accept").click(function(e){
    $("#rejectReason").dialog({
            autoOpen: true,
            modal: true,
            buttons: {
                "Submit": function () {
                 $(this).dialog("close");
                myUi._rejectMethod(e.target);
            },
                "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });
});

这允许您传递被点击的按钮，这样您就知道您正在使用哪个按钮。

Fiddler Example