文章/答案/技术大牛

发布

问如何动态地瞄准类
EN

Stack Overflow用户

提问于 2018-07-05 05:56:39

回答 2查看 22关注 0票数 1

我正在做下面的演示。为什么我不能动态地将.red添加到.ew-num中？

$(".ew-increaser").on("click", function(){
    console.log("Clicked");
    $(this).parent().prev(".ew-num").addClass('red');
    $(this).parent().find(".ew-num").addClass('red');
    $(this).parent().prev("ew-num").addClass('red');
    $(this).parent().find("ew-num").addClass('red');
});

body{
  padding:30px;
}
.red{
    background:red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default ew-decreaser">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default ew-num">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default ew-increaser">Right</button>
  </div>
</div>
</div>

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-07-05 06:02:02

你需要瞄准parent()的prev()兄弟姐妹的孩子。

$(".ew-increaser").on("click", function() {
  $(this).parent().prev().children(".ew-num").addClass('red');
});

.red {
  color: red!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="btn-group btn-group-justified" role="group" aria-label="...">
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default ew-decreaser">Left</button>
    </div>
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default ew-num">Middle</button>
    </div>
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default ew-increaser">Right</button>
    </div>
  </div>
</div>

票数 1

Stack Overflow用户

发布于 2018-07-05 06:06:46

尝试如下：-您应该使用children()获取父div子元素

$(".ew-increaser").on("click", function(){
    console.log("Clicked");
    $(this).parent().prev().children(".ew-num").addClass('red');
});

body{
  padding:30px;
}
.red{
    background:red!important;;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default ew-decreaser">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default ew-num">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default ew-increaser">Right</button>
  </div>
</div>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51184227

复制

相似问题

问如何动态地瞄准类
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何动态地瞄准类EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何动态地瞄准类
EN