Question

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

内进行一些样式更改

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

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

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

支持ISSUE IS：使用生成对话框的按钮，我不确定是否单击了生成对话框的按钮，因此在提交时我不确定哪个特定的父<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参数。

不是在以后定义对话框并在其上调用“open”，而是在实际需要在click事件中打开对话框时调用它，如下所示：

$(".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

Answer 2

根据“ charlietfl Nov 15 at 23:06 ”的建议，我能够解决我的问题：

“这是一个良好的开端....你所拥有的东西太复杂了。我只有一些基础工作才能显示出正确的拒绝 jsfiddle.net/ZtLEq/6 - charlietfl Nov 15点23:06 “

如何管理从多个按钮打开的“相同的jquery ui对话框”

2 个答案: