jQuery更改id内给定类的css

Posted

技术标签:

【中文标题】jQuery更改id内给定类的css【英文标题】:jQuery change css of given class within an id 【发布时间】:2017-03-06 00:01:19 【问题描述】:
$('#slider1 .rangeslider__handle').css("border", "4px solid #99cc44");

该语法不适用于仅更改给定 id 内该类的边框。 我也试过了

$.fn.hasAncestor = function(a) 
    return this.filter(function() 
        return !!$(this).closest(a).length;
    );
;
$('.rangeslider__handle').hasAncestor('#slider1').css("border", "4px solid #99cc44").change();

$('#slider1').find('.rangeslider__handle').css("border", "4px solid #99cc44");

【问题讨论】:

$('#slider1 .rangeslider__handle').css("border", "4px solid #99cc44"); 看花括号 这个脚本是在元素创建之后执行还是元素是动态创建的?检查您是否真的选择了任何东西的简单方法是使用浏览器开发人员工具中的 javascript 控制台。只需在选择部分输入$('#slider1 .rangeslider__handle'),控制台就会打印出 jQuery 结果。 对我来说很好:jsfiddle.net/barmar/nm069xhz/4 @Psi:他的代码是正确的,没有大括号。但是,如果你想使用花括号(对不止一个 CSS 属性更改有用),你可以使用 : 而不是属性和值之间的逗号。 ;) 哦,没错,这是个错误。当然你需要一个冒号。我不知道 $.css 中的那个符号 【参考方案1】:

您正在使用名为 "Range Slider" 的插件。

您肯定注意到插件会创建新元素以实现漂亮的视觉效果,因为您是在具有 .rangeslider__handle 类的元素之后。

此元素是 div 的另一个 div 的子元素,它具有 .rangeslider 类。 这个是您初始 htmlinput type="range" 的下一个兄弟。

因此,要以输入 id 开头的句柄为目标,您可以使用 .next(),然后使用 .find(),如下面的 sn-p 所示。

为了清楚起见,我将功能放在按钮上......而且很有趣。

$(document).ready(function()
 var sliderValueShow = $("#showValue");
     
  $('#slider1').rangeslider(
    polyfill: false,
    onSlide: function(position, value) 
      sliderValueShow.html(value);
    ,
    onSlideEnd: function(position, value) 
      sliderValueShow.html(value);
    
  );

  // Change the handle border color
  $("#setColor").click(function()
    $('#slider1').next().find('.rangeslider__handle').css("border", "4px solid #99cc44");
  );
);
#main
  text-align:center;
  padding:20px;

#showValue
  font-size:3em;

button
  border-radius:10px;
  background-color:cyan;
  padding:6px;
  outline:none;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.0/rangeslider.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.0/rangeslider.css" rel="stylesheet"/>


<div id="main">
  <input type="range" name="count" id="slider1" value="4" min="1" max="10"><br>
  <br>
  <span id="showValue">4</span><br>
  <br>
  <button id="setColor">Click me to change the handle border color</button>
</div>

【讨论】:

谢谢,谢谢 Louys,是的,效果很好 我现在收到这条消息,但是当系统允许我时,我会再次:“感谢您的反馈!声望低于 15 的投票被记录,但不要更改公开显示的帖子得分。” 大声笑......我不知道这个关于投票的限制也适用于你自己问题的答案。所以我支持你...... ;) 你仍然错过了 6 分......继续使用 SO,你的代表会增加。现在,我确定您可以接受答案。寻找投票箭头附近的复选标记。 是的,我接受了,感谢您也让我知道这一点。我在过去 3 天里有以下问题悬而未决,没有人回答,也许你有时间? ***.com/questions/42587578/…

以上是关于jQuery更改id内给定类的css的主要内容,如果未能解决你的问题,请参考以下文章

在 jQuery 中,如何检索给定类的 id? [复制]

jQuery DOM

jQuery CSS 类

jQuery - 获取并设置 CSS 类

jQuery - 获取并设置 CSS 类

如何使用 jquery 更改模式内的文本?