1

我想要做的是拥有一个可以处理多个滑块的通用 javascript。我正在添加一个跨度标签，它将为每个滑块保存滑块的值。然后我想在 change 事件上更改 span 标签的值。

我的问题是使其通用，因此它只会更改正确的跨度标签。我尝试过使用event.target.siblings().attr(title)或任何其他包含值的属性，例如 aria-valuenow 等。但它们都没有向我显示 span 标签中的值。

javascript:

$('.slider_cont a').append('<span class="tt">'+$('.slider_cont a').attr('title')+'</span>');
$('.slider_cont').live("change",function(event){
  $('.tt').html(event.target.siblings().attr('aria-valuenow'));
});

html:

<div id="ch1" class="slider_cont">
  <label for="slider-1" class="intensity_label">Intensity</label>
  <input type="range" name="slider-1" id="slider-1" data-mini="true" data-highlight="true" data-track-theme="d" data-theme="b" step="1" min="0" max="255" value="50">
</div>
<div id="ch2" class="slider_cont">
  <label for="slider-2" class="intensity_label">Lights On</label>
  <input type="range" name="slider-2" id="slider-2" data-mini="true" data-track-theme="d" data-theme="b" min="0" max="1440" value="15">
</div>

萤火虫的输出：

   <div id="ch1_intensity" class="slider_cont">
<label id="slider-1-label" class="intensity_label ui-input-text ui-slider" for="slider-1">Intensity</label>
<input id="slider-1" class="ui-input-text ui-body-b ui-corner-all ui-shadow-inset ui-mini ui-slider-input" type="number" data-type="range" value="50" max="255" min="0" step="1" data-theme="b" data-track-theme="d" data-highlight="true" data-mini="true" name="slider-1">
<div class="ui-slider ui-btn-down-d ui-btn-corner-all ui-slider-mini" role="application">
<div class="ui-slider-bg ui-btn-active ui-btn-corner-all" style="width: 32.9412%;"></div>
<a class="ui-slider-handle ui-btn ui-shadow ui-btn-corner-all ui-btn-up-b" href="#" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" role="slider" aria-valuemin="0" aria-valuemax="255" aria-valuenow="84" aria-valuetext="84" title="84" aria-labelledby="slider-1-label" style="left: 32.9412%;">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="tt-intensity">50</span>
</a>
</div>
</div>
<div id="ch1_lights_on" class="slider_cont">
<label id="slider-2-label" class="intensity_label ui-input-text ui-slider" for="slider-2">Lights On</label>
<input id="slider-2" class="ui-input-text ui-body-b ui-corner-all ui-shadow-inset ui-mini ui-slider-input" type="number" data-type="range" value="15" max="1440" min="0" data-theme="b" data-track-theme="d" data-highlight="true" data-mini="true" name="slider-2">
<div class="ui-slider ui-btn-down-d ui-btn-corner-all ui-slider-mini" role="application">
<div class="ui-slider-bg ui-btn-active ui-btn-corner-all" style="width: 1.04167%;"></div>
<a class="ui-slider-handle ui-btn ui-btn-up-b ui-shadow ui-btn-corner-all" href="#" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" role="slider" aria-valuemin="0" aria-valuemax="1440" aria-valuenow="15" aria-valuetext="15" title="15" aria-labelledby="slider-2-label" style="left: 1.04167%;">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="tt-intensity">50</span>
</a>
</div>
</div>
4

0 回答 0