Question

参考来自here的问题。

<h1>Font Size</h1>

<div class="slider"></div>
<p class="font-display">The quick brown fox jumps over the lazy dog</p>

<div class="slider"></div>
<p class="font-display">The quick brown fox jumps over the lazy dog</p>

$('.slider').slider({
  value:40,
  min: 24,
  max: 48,
  step: 1,
  slide: function( event, ui ) {
    $('#font_size').val(ui.value + ' px');
    $('.font-display').css('font-size', ui.value);
  }
});

修改：https://jsfiddle.net/8q8xhrr7/

这有两个相同类名的滑块，滑块字体大小显示在一个段落（.font-display）中，但是如果我选择一个滑块，我希望它的字体大小单独更改但是当前两者都在变化。

Answer 1

如果font-display始终位于滑块之后，您可以将jquery更改为$(this).next().css('font-size', ui.value);

jsfiddle

如果不一定是下一个元素，您可以使用$(this).nextAll('.font-display:first').css('font-size', ui.value);

指定下一个要查找的内容

jsfiddle

Answer 2

下面：

https://jsfiddle.net/0epj2g83/5/

HTML：

<h1>Font Size</h1>
<div>
    <div class="slider"></div>
    <p class="font-display">The quick brown fox jumps over the lazy dog</p>
</div>

<div>
    <div class="slider"></div>
    <p class="font-display">The quick brown fox jumps over the lazy dog</p>
</div>

CSS：

h1 {
    font-family: Helvetica, Arial;   
    font-weight: bold;
    font-size: 18px;
}

body, p{
    font-family: Helvetica, Arial;
}

JS：

$('.slider').slider({
  value:40,
  min: 24,
  max: 48,
  step: 1,
  slide: function( event, ui ) {
    var parent = $(this).parent();
    parent.find($('#font_size')).val(ui.value + ' px');
    parent.find($('.font-display')).css('font-size', ui.value);
  }
});

Answer 3

一种方法是获得最接近的元素......（可以使用first（）来确定）。

像这样：

$(this).next('.font-display')

或

$(this).closest(..)

或获取父元素然后使用find（）

$(this).parent(..).find(..)

https://jsfiddle.net/0epj2g83/8/

这是你的工作小提琴https://jsfiddle.net/8q8xhrr7/1/

两个jquery滑块具有相同的类名，但问题是移动滑块（2）

3 个答案: