Скрыть все div с одним и тем же классом, но нажал один и изменить текст

Question

Скрыть все div с одним и тем же классом, но нажал один и изменить текст

0

У меня есть 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.

Буду признателен за любую помощь. Заранее спасибо.

Mohammad Areeb Siddiqui 31 дек. 2013, в 12:36

Источник

0

Не могли бы вы уточнить свой второй вопрос
dreamweiver 31 дек. 2013, в 11:00
0

@dreamweiver Я отредактировал свой вопрос и добавил небольшое описание. Теперь, пожалуйста, помогите. :)
Mohammad Areeb Siddiqui 31 дек. 2013, в 11:03
0

@mohammmed Ариб Сиддики: попробуйте добавить context: this пределах $.Post{...}
dreamweiver 31 дек. 2013, в 11:12

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

css

5 ответов

0

это не относится к кнопке с классом "accept_offer". Вам нужно поймать селектор нажатием кнопки.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');

    });

Shashank Kumar 31 дек. 2013, в 09:45

0

это то, что сказал @adeneo .
Mohammad Areeb Siddiqui 31 дек. 2013, в 10:57
0

Оппс .... не видел этого!
Shashank Kumar 31 дек. 2013, в 10:59
0

Попробуйте ответить на мой второй вопрос, пожалуйста :)
Mohammad Areeb Siddiqui 31 дек. 2013, в 11:01
0

Снова вместо этого попробуйте использовать $ (element) .text ("Unaccept Offer"). Refresh () для изменения кнопки.
Shashank Kumar 31 дек. 2013, в 11:05

Показать ещё 2 комментария

0

Вам не нужно использовать .each() в вашем контексте, так как вы хотите скрыть все элементы этого класса. И .not() может принимать объект JQuery в качестве параметра.

Пытаться,

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

Rajaprabhu Aravindasamy 31 дек. 2013, в 08:25

0

Теперь он скрывает их обоих. : /
Mohammad Areeb Siddiqui 31 дек. 2013, в 10:45
0

Но он прячет обе кнопки одновременно, он не заботится о той, которая была нажата. : /
Mohammad Areeb Siddiqui 31 дек. 2013, в 10:47
0

@MohammadAreebSiddiqui Теперь попробуйте, я просто написал удалить вместо добавления.
Rajaprabhu Aravindasamy 31 дек. 2013, в 10:47

Показать ещё 1 комментарий

0

Вы используете not (this) для того же селектора, что означает, что сначала выбирает селектор и назначает.not(this) тому же селектору удаляет селектор. Поэтому используйте так:

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

Или попробуйте вот так:

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

Bhojendra Nepal 31 дек. 2013, в 08:25

0

эй, ты можешь попробовать таким образом

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

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

dreamweiver 31 дек. 2013, в 08:08

0

это довольно сложно, ПЛЮС, это добавление большого количества кода в сценарий, который я не хочу, как, кстати, я бы рассмотрел этот ответ, если бы я не получил более простой и точной версии моего вопроса.
Mohammad Areeb Siddiqui 31 дек. 2013, в 10:53
0

@MohammadAreebSiddiqui: я оптимизировал его сейчас, попробуйте, если у вас работает
dreamweiver 31 дек. 2013, в 10:54
0

Спасибо, но теперь я адаптировал способ, которым @adeneo сказал, пожалуйста, подумайте над ответом на мой второй вопрос. :)
Mohammad Areeb Siddiqui 31 дек. 2013, в 10:58

Показать ещё 1 комментарий

Ещё вопросы

Не могли бы вы уточнить свой второй вопрос
@dreamweiver Я отредактировал свой вопрос и добавил небольшое описание. Теперь, пожалуйста, помогите. :)
@mohammmed Ариб Сиддики: попробуйте добавить context: this пределах $.Post{...}
Попробуйте ответить на мой второй вопрос, пожалуйста :)
Снова вместо этого попробуйте использовать $ (element) .text ("Unaccept Offer"). Refresh () для изменения кнопки.
Но он прячет обе кнопки одновременно, он не заботится о той, которая была нажата. : /
@MohammadAreebSiddiqui Теперь попробуйте, я просто написал удалить вместо добавления.
это довольно сложно, ПЛЮС, это добавление большого количества кода в сценарий, который я не хочу, как, кстати, я бы рассмотрел этот ответ, если бы я не получил более простой и точной версии моего вопроса.
@MohammadAreebSiddiqui: я оптимизировал его сейчас, попробуйте, если у вас работает
Спасибо, но теперь я адаптировал способ, которым @adeneo сказал, пожалуйста, подумайте над ответом на мой второй вопрос. :)

adeneo · Accepted Answer · 2013-12-31T09-14-00.000Z

this не элемент в этой области, это объект XHR в функции ajax, как внутри обратного вызова функции $.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');
    } ....

сделать то же самое для другого условия

@MohammadAreebSiddiqui - Вы изменили это так, как я вам сказал, вот так -> jsfiddle.net/H8bVT
Спасибо! это сработало. Можете ли вы ответить на мой второй вопрос?
+1 за ответ на первый вопрос. Я бы принял ответ за ответ на второй вопрос.
@MohammadAreebSiddiqui - Как узнать, как выглядит кнопка? Это кнопка JQuery UI или что-то?
Нет, @adeneo, это кнопка начальной загрузки с btn , btn-success поскольку это классы.
Тогда просто попробуйте удалить refresh () из кода -> jsfiddle.net/H8bVT/1
И вы использовали self там, как в скрипке, так как this все еще не элемент