鍍金池/ 問(wèn)答/HTML/ 如何利用javascript來(lái)修改jquery里的代碼?

如何利用javascript來(lái)修改jquery里的代碼?

我用了jQuery-Seat-Charts v1.1.1 做了個(gè)預(yù)定位子的網(wǎng)頁(yè), 我已經(jīng)做到當(dāng)人點(diǎn)一個(gè)分行圖時(shí)時(shí)這個(gè)div會(huì)改變, 變成用戶所點(diǎn)的分行的位子預(yù)定圖,現(xiàn)在的重點(diǎn)是雖然我這個(gè)div我已經(jīng)可以做到改變了但是div里的jquery 也就是那個(gè)座位預(yù)定圖卻無(wú)法顯示,可能是因?yàn)槲矣昧薲isplay:none的方式所以預(yù)定圖里的id都沒(méi)有改變結(jié)果就成了3個(gè)div里雖然有著不同的位子預(yù)定圖但是id卻是相同的, 簡(jiǎn)單來(lái)說(shuō)就是其實(shí)我是復(fù)制粘帖了三次來(lái)+display:none;來(lái)實(shí)現(xiàn)的所以才出了問(wèn)題。
我用的是網(wǎng)上的一些例子

    <body>
        <div class="container">
          <h2 class="title">jQuery在線選座(影院版)</h2>
            <div class="demo clearfix">
                <!---左邊座位列表----->
                <div id="seat_area">
                    <div class="front">屏幕</div>                    
                </div>
                <!---右邊選座信息----->
                <div class="booking_area">
                    <p>電影:<span>天將雄師</span></p>
                    <p>時(shí)間:<span>03月20日 22:15</span></p>
                    <p>座位:</p>
                    <ul id="seats_chose"></ul>
                    <p>票數(shù):<span id="tickects_num">0</span></p>
                    <p>總價(jià):<b>¥<span id="total_price">0</span></b></p>
                    <input type="button" class="btn" value="確定購(gòu)買"/>
                    <div id="legend"></div>
                </div>
            </div>
        </div>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="jquery.seat-charts.min.js"></script>
        <script type="text/javascript">
            var price = 100; //電影票價(jià)
            $(document).ready(function() {
                var $cart = $('#seats_chose'), //座位區(qū)
                        $tickects_num = $('#tickects_num'), //票數(shù)
                        $total_price = $('#total_price'); //票價(jià)總額
                var sc = $('#seat_area').seatCharts({
                    map: [//座位結(jié)構(gòu)圖 a 代表座位; 下劃線 "_" 代表過(guò)道
                        'cccccccccc',
                        'cccccccccc',
                        '__________',
                        'cccccccc__',
                        'cccccccccc',
                        'cccccccccc',
                        'cccccccccc',
                        'cccccccccc',
                        'cccccccccc',
                        'cc__cc__cc'
                    ],
                    naming: {//設(shè)置行列等信息
                        top: false, //不顯示頂部橫坐標(biāo)(行) 
                        getLabel: function(character, row, column) { //返回座位信息 
                            return column;
                        }
                    },
                    legend: {//定義圖例
                        node: $('#legend'),
                        items: [
                            ['c', 'available', '可選座'],
                            ['c', 'unavailable', '已售出']
                        ]
                    },
                    click: function() {
                        if (this.status() == 'available') { //若為可選座狀態(tài),添加座位
                            $('<li>' + (this.settings.row + 1) + '排' + this.settings.label + '座</li>')
                                    .attr('id', 'cart-item-' + this.settings.id)
                                    .data('seatId', this.settings.id)
                                    .appendTo($cart);
                            $tickects_num.text(sc.find('selected').length + 1); //統(tǒng)計(jì)選票數(shù)量
                            $total_price.text(getTotalPrice(sc) + price);//計(jì)算票價(jià)總金額
                            return 'selected';
                        } else if (this.status() == 'selected') { //若為選中狀態(tài)
                            $tickects_num.text(sc.find('selected').length - 1);//更新票數(shù)量
                            $total_price.text(getTotalPrice(sc) - price);//更新票價(jià)總金額
                            $('#cart-item-' + this.settings.id).remove();//刪除已預(yù)訂座位
                            return 'available';
                        } else if (this.status() == 'unavailable') { //若為已售出狀態(tài)
                            return 'unavailable';
                        } else {
                            return this.style();
                        }
                    }
                });
                //設(shè)置已售出的座位
                sc.get(['1_3', '1_4', '4_4', '4_5', '4_6', '4_7', '4_8']).status('unavailable');
            });
            function getTotalPrice(sc) { //計(jì)算票價(jià)總額
                var total = 0;
                sc.find('selected').each(function() {
                    total += price;
                });
                return total;
            }
        </script>
    </body>

這我只發(fā)了其中一個(gè)分行的位子預(yù)定圖,其實(shí)一樣的代碼還有兩個(gè)在同一個(gè)網(wǎng)頁(yè)里。。

回答
編輯回答
詆毀你

這個(gè)啊 聲明個(gè)全局變量,獲取到map的時(shí)候,賦值給這個(gè)全局變量就行了

2018年1月13日 05:31