javascript - 向选定的 div 添加一个类，用于比较输入值和数据函数

Question

我创建了两个“按钮”框，用于更改隐藏的 radio 输入。

当您单击“选项 1”框时，它将更新单选输入的选定字段。我现在需要它做的是，如果单选框的值相等，则向单击的 .nc-option 添加一个类。

我试图说如果#campaign_select 输入与单击的数据函数值具有相同的值，则添加.active - 但似乎无法弄清楚。

PS:我使用的是 WordPress ACF，因此我不只是在广播区域内添加内容。

Fiddle Link

jQuery(document).on("click", "[id^=choice]", function() {

  if ($("#campaign_select input").val() == $(this).data("function")) {
    $(this).addClass('active');
  } else {
    $(this).removeClass('active');
  }
  var no = this.id.replace("choice", "");
  $("#campaign_select input[value=" + no + "]").click().prop("checked", true);

});

.nc-type {
  background: #1b2836;
  border: 1px solid black;
  padding: 8rem 4rem;
  padding-bottom: 0;
  border-bottom: 0;
}

.nc-type p {
  color: #8899A6;
  max-width: 500px;
}

.nc-type h3 {
  margin-bottom: 1rem;
}

.page-template-page-submit .page-body-inner {
  border-top: 0;
}

#campaign_select .acf-radio-list {
  display: block;
}

.nc-option {
  background: #243447;
  padding: 2rem;
  border: 1px solid black;
  margin-bottom: 4rem;
  transition: 0.3s ease all;
}

.nc-option label {
  color: #fff;
}

.nc-option:hover {
  background: #2c3f56;
  cursor: pointer;
}

.nc-option svg {
  position: relative;
  top: 5px;
}

.nc-option p {
  color: #8899A6;
  font-size: 14px;
  margin: 0;
}

.nc-option-1 .a {
  fill: #1DA1F2;
}

.nc-option-2 .a {
  fill: #f2771d;
}

.nc-option-3 .a {
  fill: #1df27f;
}

.nc-option-4 .a {
  fill: #f21d90;
}

.active {
  border-color: #1da1f2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nc-campaign-select">
  <div id="choice1" class="nc-option nc-option-1" data-function="1">
    <label>Option 1</label>
  </div>
  <!-- end of option -->
  <div id="choice2" class="nc-option nc-option-2" data-function="2">
    <label>Option 2</label>
  </div>
  <!-- end of option -->
</div>

<div id="campaign_select">
  <div class="acf-input">
    <input type="hidden">
    <ul>
      <li>
        <label class="selected">
          <input type="radio" id="ac-1" name="ac" value="1" checked="checked">Option 1</label>
      </li>
      <li>
        <label class="">
          <input type="radio" id="ac-2" name="ac" value="2">Option 2</label>
      </li>
    </ul>
  </div>
</div>

Answer 1

尝试一下这个。您不需要检查两个值是否相等。如果 .active 类已添加到任何按钮框，只需将其删除，然后将其添加到当前单击的按钮框即可。
JS:

jQuery(document).on("click", "[id^=choice]", function(event) {
  if (!$(this).hasClass('active')) {
    $("[id^=choice]").removeClass('active');
    $(this).addClass('active');
    var no = this.id.replace("choice", "");
    jQuery("#campaign_select input[value=" + no + "]").prop("checked", true);
  }
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nc-campaign-select">
  <div id="choice1" class="nc-option nc-option-1 active" data-function="1">
    <label>Option 1</label>
  </div>
  <!-- end of option -->
  <div id="choice2" class="nc-option nc-option-2" data-function="2">
    <label>Option 2</label>
  </div>
  <!-- end of option -->
</div>

<div id="campaign_select">
  <div class="acf-input">
    <input type="hidden">
    <ul>
      <li>
        <label class="selected">
          <input type="radio" id="ac-1" name="ac" value="1" checked="checked">Option 1</label>
      </li>
      <li>
        <label class="">
          <input type="radio" id="ac-2" name="ac" value="2">Option 2</label>
      </li>
    </ul>
  </div>
</div>