Question

我是jQuery的初学者。我想在这里实现的是，当我点击加号时，它应该显示该实体的速率，当我按下另一个+符号时，它应该删除所有其他类并显示我点击的那个。我尝试了很多方法，但我无法通过任何方式实现它。这是代码：

HTML文件：

<div id="flightoneway">
           <div style="border-bottom:1px solid #eee;color:#000 !important;padding: 4px;" class="details flquery">
                <div class="depinfo infos">
                    <span class="departday">

                    </span>
                    <span class="departtime">
                        10:45                       </span>
                </div>

                <div class="arrinfo infos">
                    <span class="arvday">

                    </span>
                    <span class="arvtime">
                        12:30                       </span>
                </div>

                <div class="flinfo infos">
                    <i style="color:green" class="fa fa-plane"></i>
                    <span class="flight-no">
                         NL143                      </span>
                    <span class="boeing">
                         B737-400                       </span>
                </div>

                <div class="ticket-price-info infos">
                     <span class="total-price">

                        <div class="adult-price">Rs. 37,180<span class="plus">+</span></div>

                        <div style="display:block" class="child-price">
                                16480  <span class="plus">+</span>                          </div>

                         <div style="display:block" class="infant-price">
                                700  <span class="plus">+</span>                          </div>
                     </span>

                    <span class="fare-break">
                        <div style="display:none;position: absolute;border:1px solid rgba(0,0,0,0.1); border-left:0px;border-right:0px" class="adult-price-br">
                                  <p style="font-size: 9px !important;color: #aaa;font-stretch: 50px;letter-spacing: 1px;padding:0">Fare: Rs. 13,408</p>
                                  <p style="font-size: 9px !important;color: #aaa;font-stretch: 50px;letter-spacing: 1px;padding:0">Surcharge: Rs. 0</p>
                                  <p style="font-size: 9px !important;color: #aaa;font-stretch: 50px;letter-spacing: 1px;padding:0">Fee: Rs. 640</p>
                                  <p style="font-size: 9px !important;color: #aaa;font-stretch: 50px;letter-spacing: 1px;padding:0">Tax: Rs. 5,952</p>
                        </div>

                        <div style="display:none" class="child-price-br">
                                        10056.0                                            0.0                                            640.0                                            5784.0                            </div>
                        <div style="display:none" class="infant-price-br">
                                        667.0                                            0.0                                            0.0                                            33.0                            </div>
                    </span>
                    <input type="hidden" name="dep_timestamp" id="dep_timestamp" value="1428710400">
                </div>
                <div style="width: 15%;text-align: center;" class="reserve infos">

                </div>
            </div>
        </div>

jS文件：

        $(document).on('click','.plus', function() {
            $(this).parent().parent().parent().parent().css('height','82px');
            var class_id = $(this).parent();
            var hello = $(this);
            ident = class_id.attr("class");
            $(this).parent().parent().siblings(".fare-break").children("."+ ident +"-br").show();
            $(this).html("&ndash;").removeClass("plus").addClass("minus");
        });

        $(document).on('click','.minus', function() {
            $(this).parent().parent().parent().parent().css('height','auto');
            var class_id = $(this).parent();
            var hello = $(this);
            ident = class_id.attr("class");
            $(this).parent().parent().siblings(".fare-break").children("."+ ident +"-br").hide();
            $(this).html("+").removeClass("minus").addClass("plus");
        });

CSS FILE：

body {
    font: 13px/1.42 'OpenSansRegular',Arial,Helvetica,sans-serif;
    text-align: center;
    color: #666;
    background: #E9E6E0 url(../images/bgr/body.jpg) 0 0 repeat;
    overflow-x: hidden;
    -webkit-text-size-adjust: none;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, q, small, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input, table, caption, tbody, tfoot, thead, tr, th, td, figure {
    border: 0;
    margin: 0;
    padding: 0;
}
.wrap {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    text-align: left;
    position: relative;
}

以下是jsfiddle链接：https://jsfiddle.net/4L1szujc/1/

Answer 1

 $(document).on('click','.plus', function() {
       $(".minus").each(function(i) {
            $(this).html("+").removeClass("minus").addClass("plus");
       });
       $('div[class$="-br"]').hide();
       $('.' + $(this).parent().attr('class') + '-br').show();
       $(this).parent().parent().parent().parent().css('height','82px');
       $(this).html("&ndash;").removeClass("plus").addClass("minus");
 });

 $(document).on('click','.minus', function() {
       $(this).parent().parent().parent().parent().css('height','auto');
       $('div[class$="-br"]').hide();
       $(this).html("+").removeClass("minus").addClass("plus");
 });

这只是对原始代码的快速编辑。你真正应该做的是重新构建整个结构，以便更容易地在元素（id，类，子等）之间建立关系。

小提琴：https://jsfiddle.net/4L1szujc/4/

我应该提到另一件事：我采取了捷径。我没有关闭被点击的“实际”元素，而是关闭所有具有以-br结尾的类的元素。原因是你的代码允许它，我已经明确表示我不认为你应该这样做。

在jQuery中打开另一个类时删除一个类？

1 个答案: