将一个类添加到选定的div中，以比较输入值和数据功能

Question

我创建了两个“按钮”框，它们将用作更改隐藏的无线电输入的一种方式。

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

我试图说if该#campaign_select input具有相同的值作为点击数据的函数值，再加入.active -但似乎无法推测出来。

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

小提琴链接

 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>

Answer 2

您的情况不对。 您必须先删除类，然后再将类添加到当前div

堆栈片段

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

 .nc-type { background: $branding_2; border: 1px solid $branding_3; padding: 8rem 4rem; padding-bottom: 0; border-bottom: 0; } .nc-option { background: #243447; padding: 2rem; border: 1px solid $branding_3; margin-bottom: 4rem; transition: 0.3s ease all; } .active { background: red !important; } 

 <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> 

更新小提琴