3

我正在尝试在动态创建的列表元素中创建一个 jQuery UI 滑块小部件。就目前而言，列表有效，项目被创建并添加到列表中，滑块显示并响应用户输入，但它没有使用我传入的值进行初始化。我觉得我很接近，但我错过了一些东西。我正在使用 jQuery Mobile 1.0.1 和 jQuery 1.6.4，我对 Javascript 和 jQuery 还比较陌生。

除了页眉和页脚之外，以下是主页中的内容总和：

<div data-role="content">
  <ul data-role="listview" data-theme="g" id="items">
  </ul>      
</div>

没有什么花哨。

现在，用户单击页脚中的几个按钮，更新了一个数组，我添加了一个这样的列表项（精简）：

    var item = arguments[0];

    // items_in_order is a 2d global array that's 
    // updated w/ the items the user adds
    var li = get_list_item( item, 
                            items_in_order[item][0], 
                            items_in_order[item][1], 
                            items_in_order[item][2] );

    // if the list item already exists, replace it, 
    // otherwise add it to the list as a new entry.        
    if ( $("#item_" + item).length ) {
      $("#item_" + item).replaceWith( li );
    }
    else {
      $("#items").append( li );
    }

    // this is where I'm creating the slider
    if ( items_in_order[item][2] ) {
      $("#item_" + item + "_price_slider").slider({ value: 1, 
                                                    min: 0, 
                                                    max: 2, 
                                                    step: 1 });

    }

    // if we updated an existing list item, recreate it,
    // otherwise recreate the whole list
    if ( $("#item_" + item).length ) {
      $("#item_" + item).trigger('create');
    }
    else {
      $("#items").trigger('create');
    }

    // and refresh the list view
    $('#items').listview('refresh');

列表项的 HTML 正在此函数中创建：

function get_list_item ( name, qty, price, by_weight ) {

  var str = "";
  str += '<li id="item_' + name + '">';
  str += '<table style=" font-size: 20pt; %" ><tr>';
  str +=   '<td style="width: 50%;">' + name + "</td>";
  str +=   '<td style="width: 50%; ">';
  str +=     '<input style=" width: 40px; float: left " type="number" id="item_' + name + '_qty" value="' + qty + '"> x ' + price;
  str +=   '</td>';      
  str += "</tr></table>";
  if ( by_weight ) {
    str += '<div><div id="item_' + name + '_price_slider"></div></div>';

  }
  str += "</li>";

  return str;
}

再一次，没什么特别的。现在这里是呈现页面时创建的 HTML。（复制自萤火虫。）

<li id="item_Potatoes" class="ui-li ui-li-static ui-body-g">
  <table style="font-size: 20pt; width: 100%;">
    <tbody>
      <tr>
        <td style="width: 50%;">Potatoes</td>
        <td style="width: 10%;">
          <input type="number" value="1" id="item_Potatoes_qty" style="width: 40px; float: left;" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset"> x 2
        </td>
        <td style="width: 10%;">$2</td>
      </tr>
    </tbody>
  </table>
  <div>
    <div id="item_Potatoes_price_slider" class="ui-slider-switch"></div>
    <div role="application" class="ui-slider  ui-btn-down-c ui-btn-corner-all">
      <a class="ui-slider-handle ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c" href="#" data-theme="c" role="slider" aria-valuemin="0" aria-valuemax="-1" aria-labelledby="item_Potatoes_price_slider-label" style="left: 0%;" aria-valuetext="" title="-1">
        <span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
          <span class="ui-btn-text"></span>
        </span>
      </a>
    </div>
  </div>
</li>

所以，作为新手，我注意到两件事：

  1. 最小值、最大值等的设置似乎没有正确设置。
  2. 我的印象是.slider()，在这种情况下，调用会将 ui 滑块插入到其 id 被调用的元素中#item_Potatoes_price_slider，但正如您所看到的，它正在创建一个新元素“下一个”它被调用的元素。这是相关的还是我误解了什么？
  3. 我还包括一个回调来slider更新#item_Potatoes_qty盒子，因为它是滑动的，但这也不起作用。我在调试时把它剪掉了，这似乎没有任何影响。

那么，任何想法为什么这不起作用？（顺便说一句，我也愿意接受有关改进这一点并使其更清洁的建议。）谢谢！

4

0 回答 0