Question

我在这一个问题中有2个问题。

第一个是：我知道我们可以通过在对象上应用.not(this)来做到这一点，但我不知道为什么会发生这种情况。我已经应用了上述技术，但我无法使其正常工作。

这是FOF我的HTML：

<div class="row-fluid offer">
    <div class="span2">
        <img class="profile_picture" src="admin/profile_pictures/default_profile_picture.png">
    </div>
    <div class="span10">
        <div class="row-fluid">
            <div class="username">
                <p style="font-weight: bold;">Mohammad Danish Siddiqui</p>
            </div>
        </div>
        <div class="row-fluid">
            <div class="content">
                <p class="content">zaza</p><span class="pull-right" style="margin-top: -30px; margin-right: 20px;"><button class="accept_offer btn btn-success" data-offer-id="32">Accept Offer</button></span>
                <textarea class="hide span12" id="edited_content">zaza</textarea>
                <button type="button" class="hide btn btn-primary btn-small" id="save_edits" onclick="editPostOffer(&quot;18&quot;,&quot;32&quot;,&quot;[object HTMLTextAreaElement]&quot;);">Save Edits</button>&nbsp;
                <button type="button" class="hide btn btn-primary btn-small cancel_edits">Cancel Edits</button>
            </div>
        </div>
        <div class="row-fluid">
            <div class="date">
                <p class="pull-right"><strong><span class="muted">Offered on: </span></strong>2013-12-19</p>
            </div><a href="conversation.php?id=17">Contact this person</a>&nbsp;</div>
    </div>
</div>
<div class="row-fluid offer">
    <div class="span2">
        <img class="profile_picture" src="admin/profile_pictures/default_profile_picture.png">
    </div>
    <div class="span10">
        <div class="row-fluid">
            <div class="username">
                <p style="font-weight: bold;">Mohammad Danish Siddiqui</p>
            </div>
        </div>
        <div class="row-fluid">
            <div class="content">
                <p class="content">zaza</p><span class="pull-right" style="margin-top: -30px; margin-right: 20px;"><button class="accept_offer btn btn-success" data-offer-id="32">Accept Offer</button></span>
                <textarea class="hide span12" id="edited_content">zaza</textarea>
                <button type="button" class="hide btn btn-primary btn-small" id="save_edits" onclick="editPostOffer(&quot;18&quot;,&quot;32&quot;,&quot;[object HTMLTextAreaElement]&quot;);">Save Edits</button>&nbsp;
                <button type="button" class="hide btn btn-primary btn-small cancel_edits">Cancel Edits</button>
            </div>
        </div>
        <div class="row-fluid">
            <div class="date">
                <p class="pull-right"><strong><span class="muted">Offered on: </span></strong>2013-12-19</p>
            </div><a href="conversation.php?id=17">Contact this person</a>&nbsp;</div>
    </div>
</div>

这是SOF我的Javascript应该对这种异常行为负责：

$(".accept_offer").on('click', function () {
    var offer_id = $(this).data("offer-id");
    if ($(this).text() == "Accept Offer") {
        $.post("admin/post_offer/set_post_offer_acceptance.php", {
            id: offer_id,
            acceptance: "accepted"
        }, function (data) {
            if (data.status == "success") {
                $("#acceptedOfferModal").modal("show");
                setTimeout(function () {
                    $("#acceptedOfferModal").modal("hide");
                }, 2500);
                $(".accept_offer").not(this).each(function () {
                    $(this).addClass("hide");
                });
                $(this).text("Unaccept Offer").refresh();
                $("#has_accepted_offer_alert").removeClass("hide");
            }
        }, 'json');
    } else if ($(this).text() == "Unaccept Offer") {
        $.post("admin/post_offer/set_post_offer_acceptance.php", {
            id: offer_id,
            acceptance: "unaccepted"
        }, function (data) {
            if (data.status == "success") {
                $("#unacceptedOfferModal").modal("show");
                setTimeout(function () {
                    $("#unacceptedOfferModal").modal("hide");
                }, 2500);
                $(".accept_offer").not(this).each(function () {
                    $(this).removeClass("hide");
                });
                $(this).text("Accept Offer").refresh();
                $("#has_accepted_offer_alert").removeClass("hide");

            }
        }, 'json');
    }
});

我不知道为什么，但这段代码：

$(".accept_offer").not(this).each(function () {
    $(this).removeClass("hide");
});

或者这段代码：

$(".accept_offer").not(this).each(function () {
    $(this).addClass("hide");
});

工作不正常。除了这个之外，它应该隐藏或显示其余的div，但它没有这样做。当我点击它时，没有任何事情发生，除了正在显示的模态和隐藏。

第二个问题是：我正在尝试更改单击的按钮，但它也没有更改。代码与上面提到的相同。这只是意味着当单击具有.accept_offer类的特定按钮时，我想根据if条件更改按钮文本。

我将不胜感激任何帮助。提前谢谢。

Answer 1

this不是该范围内的元素，它是ajax函数中的XHR对象，因为它位于$.post函数的回调中，并且创建了一个新范围

$(".accept_offer").on('click', function () {
    var offer_id = $(this).data("offer-id");

    var self = this; // store the value of this

    if ($(this).text() == "Accept Offer") {
        $.post("admin/post_offer/set_post_offer_acceptance.php", {
            id: offer_id,
            acceptance: "accepted"
        }, function (data) { // this creates a new scope, and changes "this"

            // now use self inside this scope

            $(".accept_offer").not(self).addClass("hide");

        }, 'json');
    } ....

同样适用于其他条件

Answer 2

您不需要在上下文中使用.each()，因为您要隐藏该类的所有元素。 .not()可以接受Jquery对象作为参数。

尝试，

$(".accept_offer").not($(this)).addClass('hide');

Answer 3

您使用的不是（this）到相同的选择器，这意味着首先选择器并将.not（this）分配给相同的选择器将删除选择器。所以使用这样：

$(".accept_offer").each(function () {  
   $(".accept_offer").removeClass("hide");
   $(this).addClass("hide");
});

或者尝试这样：

$(".accept_offer").each(function () {  
   $(".accept_offer").not(self).removeClass("hide");
});

Answer 4

嘿，你可以这样试试

$(".accept_offer").on('click',function () {
     $(this).addClass('activeClass');
});

$('div:not(.activeClass)').hide();

Answer 5

这并不是指具有类“”accept_offer“的Button。你需要点击按钮来捕捉选择器。如

$(".accept_offer").on('click', function () {
   var element=this; //Save the clicked Button
   var offer_id = $(this).data("offer-id");
    if ($(this).text() == "Accept Offer") {
        $.post("admin/post_offer/set_post_offer_acceptance.php", {
            id: offer_id,
            acceptance: "accepted"
        }, function (data) {
            if (data.status == "success") {
                $("#acceptedOfferModal").modal("show");
                setTimeout(function () {
                    $("#acceptedOfferModal").modal("hide");
                }, 2500);
                $(".accept_offer").not(element).each(function () { 
//Do each operation insted of "element" which is saved
                        $(this).addClass("hide");
                    });
                    $(elemnt).text("Unaccept Offer").refresh();
                    $("#has_accepted_offer_alert").removeClass("hide");
                }
            }, 'json');

    });

隐藏具有相同类的所有div，但单击并更改文本

5 个答案: