在Jquery Mobile上使用append时获取额外数据

时间:2015-05-29 10:29:29

标签: jquery-mobile

我有2次潜水,我希望展示某种形式。 出于某种原因,当我使用追加时,我收到了更多我没有要求的文字。

这是html-

 <div data-role="collapsible" data-theme="a" data-content-theme="a">
                    <h3>טריקו קצר</h3>

                    <div  dir="rtl" data-role="fieldcontain">
                        <label for="select-choice-1" class="select">בחר צבע:</label>
                        <select name="select-choice-1" id="select-choice-1">
                            <option value="standard">בחר</option>
                            <option value="לבן">לבן</option>
                            <option value="שחור">שחור</option>
                            <option value="כחול-ים">כחול-ים</option>
                            <option value="בורדו">בורדו</option>
                            <option value="ירוק">ירוק</option>
                            <option value="סגול כהה">סגול כהה</option>
                            <option value="אדום">אדום</option>

                        </select>
                    </div>

                    <div dir="rtl" data-role="fieldcontain">
                        <label for="select-choice-2" class="select">בחר מידה:</label>
                        <select name="select-choice-2" id="select-choice-2">
                            <option  class="center-button"value="standard">בחר</option>
                            <option value="Small">S</option>
                            <option value="Medium">M</option>
                            <option value="Large">L</option>
                            <option value="EE">EE</option>

                        </select>
                    </div>

                    <div data-role="fieldcontain">
                        <label for="slider" class="select">כמות:</label>
                        <input type="range" name="slider" id="slider" value="0" min="0" max="500" data-highlight="true"  />
                            <div class="ui-block-a button-basket"><button data-theme="b" id="triko" class="basket">הוסף לסל</button></div>
                    </div>


                </div>

                                                     <!-- end   TRIKO -->

            <!-- ----------------------------------     GUFIOT    ---------------------------------------- -->

                <div data-role="collapsible" data-theme="a" data-content-theme="a">
                    <h3>גופיות קייציות</h3>

                    <div  dir="rtl" data-role="fieldcontain">
                        <label for="select-choice-3" class="select">בחר צבע:</label>
                        <select name="select-choice-3" id="select-choice-3">
                            <option value="standard">בחר</option>
                            <option value="לבן">לבן</option>
                            <option value="אפור אמריקאי">אפור אמריקאי</option>
                            <option value="שחור">שחור</option>
                            <option value="כחול-ים">כחול-ים</option>
                            <option value="בורדו">בורדו</option>
                            <option value="ירוק">ירוק</option>
                            <option value="סגול כהה">סגול כהה</option>
                            <option value="אדום">אדום</option>
                            <option value="כחול כהה">כחול כהה</option>
                            <option value="ירוק כהה">ירוק כהה</option>
                            <option value="טורקיז">טורקיז</option>
                            <option value="כתום">כתום</option>
                            <option value="צהוב">צהוב</option>
                            <option value="לילך">לילך</option>
                            <option value="חציל">חציל</option>
                            <option value="ורוד">ורוד</option>
                            <option value="תכלת">תכלת</option>
                            <option value="ירוק זית">ירוק זית</option>
                            <option value="אופוויט">אופוויט</option>
                            <option value="ורוד זועק">ורוד זועק</option>
                            <option value="חום">חום</option>
                            <option value="מג'ב / לוטר">מג"ב/לוטר</option>
                            <option value="צהוב בננה">צהוב בננה</option>
                            <option value="ירוק תפוח">ירוק תפוח</option>                        
                        </select>

                    </div>

                    <div dir="rtl" data-role="fieldcontain">
                        <label for="select-choice-4" class="select">בחר מידה:</label>
                        <select name="select-choice-4" id="select-choice-4">
                            <option  class="center-button"value="standard">בחר</option>
                            <option value="Small">S</option>
                            <option value="Medium">M</option>
                            <option value="Large">L</option>
                            <option value="EE">EE</option>                                      
                        </select>
                    </div>

                    <div data-role="fieldcontain">
                        <label for="slider" class="select">כמות:</label>
                        <input type="range" name="slider" id="slider1" value="0" min="0" max="500" data-highlight="true"  />
                            <div class="ui-block-a button-basket"><button data-theme="b" id="gufiot" class="basket">הוסף לסל</button></div>
                    </div>

                </div>

<div class="order">
                        <h3>פרטי ההזמנה</h3>
                        <p class="item_name"></p>
                    </div>

                                                 <!-- end   gofiot -->

这是我的JQ代码 -

  $(document).ready(function(){


        $('#slider').on('slidestop',function(){
        var changeVar = $('#slider').val();

        $(".ui-block-a").one('click',function(){
          $(".item_name").append("<h2>טריקו קצר</h2>" + "צבע:" + $("#select-choice-1").val() + ", כמות: " + changeVar + ", מידה: " + $("#select-choice-2").val() + "<br>")
          $("#select-choice-1").val("standard")
          $('#select-choice-1').selectmenu('refresh')
           $("#select-choice-2").val("standard")
          $('#select-choice-2').selectmenu('refresh')
          $("#slider").val(0).slider("refresh");
          //$( "#select-choice-1 option:selected" ).text("fffff");
        });
    });

        $('#slider1').on('slidestop',function(){
        var changeVar1 = $('#slider1').val();

        $("#gufiot").one('click',function(){
          $(".item_name").append("<h2>גופיות קייציות</h2>" + "צבע:" + $("#select-choice-3").val() + ", כמות: " + changeVar1 + ", מידה: " + $("#select-choice-4").val() + "<br>")
          $("#select-choice-3").val("standard")
          $('#select-choice-3').selectmenu('refresh')
           $("#select-choice-4").val("standard")
          $('#select-choice-4').selectmenu('refresh')
          $("#slider1").val(0).slider("refresh");
          //$( "#select-choice-1 option:selected" ).text("fffff");
        });
    });

如果我使用第一个功能然后使用第二个功能我会得到另一个我没有要求的线路。因此得到了 -

טריקו קצר

צבע:אפור אמריקאי, כמות: 308, מידה: Small
גופיות קייציות

צבע:שחור, כמות: 318, מידה: Small
טריקו קצר

我正在 -

טריקו קצר

צבע:אפור אמריקאי, כמות: 308, מידה: Small
גופיות קייציות

צבע:שחור, כמות: 318, מידה: Small
טריקו קצר

צבע:standard, כמות: 308, מידה: standard .

如果我只使用其中的一个功能,那就很好......

1 个答案:

答案 0 :(得分:0)

解决了我自己的问题! 它很开心,因为“.ui-block-a”位于另一个表格上,所以我得到2个附加...