Hide all divs with same class but the one clicked and change text

Question

I have 2 questions in this one question.

The first one is: I know that we could do that by applying .not(this) on the object but I don't know why is that happening. I have applied the above mentioned technique but I am not able to get it working properly.

Here is FOF my 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>

Here is SOF my Javascript that should be responsible for this abnormal behaviour:

$(".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');
    }
});

I don't know why but this code:

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

Or this code:

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

Is not working properly. It should hide or show the rest of the divs except for this but it's not doing it. Nothing is happening when I click it except for the modal being shown and hid.

The second question is: I am trying to change the button which is clicked but it's also not changing. The code is the same that is mentioned above. This just means that when the specific button with the .accept_offer class is clicked I want to change the button text according to the if conditions.

I would appreciate any help. Thanks in advance.

Answer 1

this does not refers to the Button having class `"accept_offer".you need to catch the selector at click of the button .like

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

    });

Answer 2

hey you can try this way

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

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

Answer 3

You are using not(this) to same selector that means firstly selector and assigning .not(this) to same selector will remove the selector. So use like this:

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

Or try like this:

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

Answer 4

this is not the element in that scope, it's the XHR object in the ajax function as it's inside the callback of the $.post function, and that creates a new scope

$(".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');
    } ....

do the same for the other condition as well

Answer 5

You don't need to use .each() in your context, since you want to hide all the elements with that class. And .not() can accept Jquery object as a parameter.

Try,

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