Question

我正在为一个项目工作。我快速进入[编码一些按钮（https://codepen.io/ryantinsley/pen/XqOBGb）。我创造了2个州。蓝色选定的类和概述的取消选择的类。我想在每次单击其中一个按钮时在这两个类之间切换。

我在jQuery中尝试了很多东西，有些事情已经发挥作用，例如更改h1文本颜色，但除此之外似乎没有什么对我有用。

简而言之，我正在寻找在每次点击时在两个按钮之间切换的最佳方式。

提前感谢您的帮助

＆＃13;

h1 {
  font-family: sans-serif;
  font-size: 16px;
  font-weight: light;
  display: inline;
}

#star {
  background-image: url("https://image.ibb.co/mdSJgT/Hollow_Star.png");
  width: 14px;
  height: 14px;
  display: inline-block;
}

#container {
  padding: 8px 8px;
  border: solid 1px;
  display: inline-block;
}

#starselect {
  background-image: url("https://image.ibb.co/hZ2Uo8/Filled_Star.png");
  width: 14px;
  height: 14px;
  display: inline-block;
}

#containerselect {
  padding: 8px 8px;
  display: inline-block;
  background: #006DEF;
}

#h1select {
  font-family: sans-serif;
  font-size: 16px;
  font-weight: light;
  display: inline;
  color: white;
}

＆＃13;

<div id="container">
  <div id="star"></div>
  <h1>Link</h1>
</div>

<div id="containerselect">
  <div id="starselect"></div>
  <h1 id="h1select">Link</h1>
</div>

＆＃13;

Answer 1

将您的id转换为类并使用jQuery的toggleClass()。这是一个例子。

$("#button").on("click", function() {
  $(this).children().toggleClass("container containerselect");
  $(this).children().children().eq(0).toggleClass("star starselect");
  $(this).find("h1").toggleClass(" h1select");
});

h1 {
  font-family: sans-serif;
  font-size: 16px;
  font-weight: light;
  display: inline;
}

.star {
  background-image: url("https://image.ibb.co/mdSJgT/Hollow_Star.png");
  width: 14px;
  height: 14px;
  display: inline-block;
}

.container {
  padding: 8px 8px;
  border: solid 1px;
  display: inline-block;
}

.starselect {
  background-image: url("https://image.ibb.co/hZ2Uo8/Filled_Star.png");
  width: 14px;
  height: 14px;
  display: inline-block;
}

.containerselect {
  padding: 8px 8px;
  display: inline-block;
  background: #006DEF;
}

.h1select {
  font-family: sans-serif;
  font-size: 16px;
  font-weight: light;
  display: inline;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button">
  <div class="container">
    <div class="star"></div>
    <h1>Link</h1>
  </div>
</div>

Answer 2

首先使用类创建css。

然后你可以使用：

$("#starselect").click(function() {
   $(this).removeClass('class2');
   $(this).addClass('class1');
});

PS： 1.您可以使用Jquery中的attr()函数删除或添加ID。但这不是建议的。因为ID定义了一个元素，而不是它的样式。

您也可以使用toggleClass()

Answer 3

您可以尝试以下解决方案：

https://codepen.io/anon/pen/jxdQav

的jQuery

$('.divlink').on('click', function(e){
  $('.divlink').not(this).removeClass('active');
  $(this).addClass('active');
})

HTML

 <div id="container" class="divlink">
     <div id ="star"></div>
    <h1>Link</h1>
 </div>

<div id="container" class="divlink active">
   <div id ="starselect"></div>
   <h1 id ="h1select">Link</h1>
</div>

CSS

h1 {
  font-family: sans-serif;
  font-size: 16px;
  font-weight: light;
  display: inline;
}

#star {
  background-image: url("https://image.ibb.co/mdSJgT/Hollow_Star.png");
  width: 14px;
  height: 14px;
  display: inline-block;
}

#container {
  padding: 8px 8px;
  border: solid 1px;
  display: inline-block;
}

#starselect {
  background-image: url("https://image.ibb.co/hZ2Uo8/Filled_Star.png");
  width: 14px;
  height: 14px;
  display: inline-block;
}

.active {
  padding: 8px 8px;
  display: inline-block;
  background: #006DEF;
}

#h1select {
  font-family: sans-serif;
  font-size: 16px;
  font-weight: light;
  display: inline;
  color: white;
}

初学者JQuery Toggling类

3 个答案: