Question

我正在尝试更改每个按钮的颜色，而不使用项目列表中的唯一ID。

这些按钮是使用单独的div元素定义的，我需要在点击时更改按钮的颜色以切换状态。

我设法做到了，但是当我点击其他元素时它也改变了第一个元素的颜色。如何解耦和更改相应元素的颜色。我试图使用$（this），但它不起作用。

$('.test-toggleswitch-checkbox').click(function() {
  var checkbox = $(this);
  if ($(this).is(':checked')) {
    checkbox.next('.test-toggleswitch-label').find('.test-unchecked').addClass('test-hidden');
    checkbox.next('.test-toggleswitch-label').find('.test-checked').removeClass('test-hidden');
  } else {
    checkbox.next('.test-toggleswitch-label').find('.test-checked').addClass('test-hidden');
    checkbox.next('.test-toggleswitch-label').find('.test-unchecked').removeClass('test-hidden');
  }
});

检查此处附带的codepen。

https://codepen.io/balamax/pen/eVqbbY

Answer 1

您在id中的每个checkbox和for值中使用相同的label，这就是为什么您的第一个checkbox始终被检查的原因

因此，更改每个id的{{1}}及其checkbox中的for值

Stack Snippet

label

$('.test-toggleswitch-checkbox').click(function() {
  var checkbox = $(this);
  if ($(this).is(':checked')) {
    checkbox.next('.test-toggleswitch-label').find('.test-unchecked').addClass('test-hidden');
    checkbox.next('.test-toggleswitch-label').find('.test-checked').removeClass('test-hidden');
  } else {
    checkbox.next('.test-toggleswitch-label').find('.test-checked').addClass('test-hidden');
    checkbox.next('.test-toggleswitch-label').find('.test-unchecked').removeClass('test-hidden');
  }
});

li {
  float: left;
  width: 100%;
  list-style: none;
  margin-bottom: 10px;
}

.test-toggleswitch {
  width: 170px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  float: right;
}

.test-toggleswitch-checkbox {
  display: none;
}

.test-toggleswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  float: left;
}

.test-toggleswitch-inner {
  display: block;
  width: 100%;
  float: left;
  transition: margin 0.3s ease-in 0s;
  background-color: #ffb74d;
  border: 1px solid #D38D27;
  border-radius: 4px;
  color: #333;
  padding: 7px 15px;
}

.test-toggleswitch-inner.test-checked {
  background-color: #58c459;
  border: 1px solid #4da54e;
  color: #fff;
}

.test-toggleswitch-inner:before {
  display: block;
  float: left;
  padding: 0;
  line-height: 1;
  font-size: 18px;
  color: #333;
  box-sizing: border-box;
  margin-right: 5px;
}

.test-toggleswitch-inner.test-unchecked:before {
  content: "\e92d";
  color: #333;
  font-family: 'Linearicons-dxd';
  float: left;
}

.test-toggleswitch-inner.test-checked:before {
  content: "\e92e";
  color: #fff;
  text-align: left;
  font-family: 'Linearicons-dxd';
  float: left;
}

.test-cards-list-item-title-actions .test-toggleswitch {
  float: left;
}

.test-float-right {
  float: right;
}

.test-tab-highlight {
  border: 2px #D38D27 solid;
  background: #ffb74d;
  border-bottom-color: #b1dafc;
  color: #333;
}

.test-hidden {
  position: absolute;
  top: -20000px !important;
  left: -20000px !important;
}

Answer 2

正如Bhuwan所说，问题是在相同的id值。但我想补充一点，即使没有JavaScript，也可以实现这种行为。

在下面的例子中，我将input:checkbox移到了一个级别。现在我们可以使用简单的CSS突出显示所选按钮：

.test-toggleswitch-checkbox:checked + .test-toggleswitch .test-toggleswitch-inner {
    background-color: #58c459;
    border: 1px solid #4da54e;
    color: #fff;
}

li{
  float: left;
  width: 100%;
}
.test-toggleswitch {
    width: 170px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    float: right;
}

.test-toggleswitch-checkbox {
    display: none;
}

.test-toggleswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    float: left;
}

.test-toggleswitch-inner {
    display: block;
    width: 100%;
    float: left;
    transition: margin 0.3s ease-in 0s;
    background-color: #ffb74d;
    border: 1px solid #D38D27;
    border-radius: 4px;
    color: #333;
    padding: 7px 15px;
}

.test-toggleswitch-checkbox:checked + .test-toggleswitch .test-toggleswitch-inner {
    background-color: #58c459;
    border: 1px solid #4da54e;
    color: #fff; 
}

.test-toggleswitch-inner:before {
    display: block;
    float: left;
    padding: 0;
    line-height: 1;
    font-size: 18px;
    color: #333;
    box-sizing: border-box;
    margin-right: 5px;
}

.test-toggleswitch-inner.test-unchecked:before {
    content: "\e92d";
    color: #333;
    font-family: 'Linearicons-dxd';
    float: left;
}

.test-toggleswitch-inner.test-checked:before {
    content: "\e92e";
    color: #fff;
    text-align: left;
    font-family: 'Linearicons-dxd';
    float: left;
}



.test-cards-list-item-title-actions .test-toggleswitch {
    float: left;
}

.test-float-right {
    float: right;
}

.test-tab-highlight {
    border: 2px #D38D27 solid;
    background: #ffb74d;
    border-bottom-color: #b1dafc;
    color: #333;
}

.test-hidden{
    position: absolute;
    top: -20000px !important;
    left: -20000px !important;
}

<ul>
  <li>
    <div class="test-cards-list-item-title-actions">
      <input type="checkbox" name="toggleswitch" class="test-toggleswitch-checkbox" id="mytoggleswitch1">
      <div class="test-toggleswitch">
        <label class="test-toggleswitch-label" for="mytoggleswitch1"><span class="test-toggleswitch-inner test-unchecked">SHORTLIST</span><span class="test-toggleswitch-inner test-checked test-hidden">SHORTLISTED</span></label>
      </div>
    </div>
  </li>
  <li>
    <div class="test-cards-list-item-title-actions">
      <input type="checkbox" name="toggleswitch" class="test-toggleswitch-checkbox" id="mytoggleswitch2">
      <div class="test-toggleswitch">
        <label class="test-toggleswitch-label" for="mytoggleswitch2"><span class="test-toggleswitch-inner test-unchecked">SHORTLIST</span><span class="test-toggleswitch-inner test-checked test-hidden">SHORTLISTED</span></label>
      </div>
    </div>
  </li>
  <li>
    <div class="test-cards-list-item-title-actions">
      <input type="checkbox" name="toggleswitch" class="test-toggleswitch-checkbox" id="mytoggleswitch3">
      <div class="test-toggleswitch">
        <label class="test-toggleswitch-label" for="mytoggleswitch3"><span class="test-toggleswitch-inner test-unchecked">SHORTLIST</span><span class="test-toggleswitch-inner test-checked test-hidden">SHORTLISTED</span></label>
      </div>
    </div>
  </li>
  <li>
    <div class="test-cards-list-item-title-actions">
      <input type="checkbox" name="toggleswitch" class="test-toggleswitch-checkbox" id="mytoggleswitch4">
      <div class="test-toggleswitch">
        <label class="test-toggleswitch-label" for="mytoggleswitch4"><span class="test-toggleswitch-inner test-unchecked">SHORTLIST</span><span class="test-toggleswitch-inner test-checked test-hidden">SHORTLISTED</span></label>
      </div>
    </div>
  </li>
</ul>

如何解除每个项目的操作

2 个答案: