Javascript 将一个类添加到所选div中，以比较输入值和数据函数

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

单击“选项1”框时，它将更新收音机输入的选定字段。我现在需要它做的是，如果单选框的值相等，则向单击的

.nc选项添加一个类

我试着说
如果
#campaign#u select input
的值与单击的数据函数值相同，则添加
.active
——但似乎无法理解

PS：我使用的是WordPress ACF，所以我不只是在广播区内添加内容



jQuery（document）.on（“单击”，“[id^=choice]”，函数（）{
if（$（“#活动_选择输入”）.val（）==$（此）.data（“函数”））{
$（this.addClass（'active'）；
}否则{
$（this.removeClass（'active'）；
}
var no=this.id.replace（“选择”，即“”）；
$（“#活动_选择输入[value=“+no+”]）。单击（）.prop（“选中”，为真）；
});
.nc类型{
背景：#1b2836；
边框：1px纯黑；
填充：8rem 4rem；
填充底部：0；
边界底部：0；
}
.nc类型p{
颜色：#8899A6；
最大宽度：500px；
}
.nc h3型{
边缘底部：1rem；
}
.页面模板页面提交.页面正文内部{
边界顶部：0；
}
#活动\选择acf电台列表{
显示：块；
}
.nc选项{
背景：#243447；
填充：2rem；
边框：1px纯黑；
边缘底部：4rem；
过渡：0.3s缓解所有；
}
.nc选项标签{
颜色：#fff；
}
.nc选项：悬停{
背景#2c3f56；
光标：指针；
}
.nc选项svg{
位置：相对位置；
顶部：5px；
}
.nc选项p{
颜色：#8899A6；
字体大小：14px；
保证金：0；
}
.nc-选项-1.a{
填充：#1DA1F2；
}
.nc-选项-2.a{
填充：#f2771d；
}
.nc-选项-3.a{
填充物：1df27f；
}
.nc-选项-4.a{
填充：#f21d90；
}
.主动{
边框颜色：#1da1f2；
}

选择1
选择2


选择1


选择2


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

JS:

HTML:


选择1
选择2


选择1


选择2


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

JS:

HTML:


选择1
选择2


选择1


选择2


您的状况不正常。您必须先删除类，然后将类添加到当前div

堆栈片段


jQuery（document）.on（“单击”，“[id^=choice]”，函数（）{
var no=this.id.replace（“选择”，即“”）；
if（$（this）.data（“函数”）==否）{
$（'.nc option'）.removeClass（'active'）；
$（this.addClass（'active'）；
}else{}
jQuery（#活动_选择输入[value=“+no+”]）。单击（）.prop（“选中”，为真）；
});
.nc类型{
背景：$U 2；
边框：1px实心$branding_3；
填充：8rem 4rem；
填充底部：0；
边界底部：0；
}
.nc选项{
背景：#243447；
填充：2rem；
边框：1px实心$branding_3；
边缘底部：4rem；
过渡：0.3s缓解所有；
}
.主动{
背景：红色！重要；
}

选择1
选择2


选择1


选择2


您的状况不正常。您必须先删除类，然后将类添加到当前div

堆栈片段


jQuery（document）.on（“单击”，“[id^=choice]”，函数（）{
var no=this.id.replace（“选择”，即“”）；
if（$（this）.data（“函数”）==否）{
$（'.nc option'）.removeClass（'active'）；
$（this.addClass（'active'）；
}else{}
jQuery（#活动_选择输入[value=“+no+”]）。单击（）.prop（“选中”，为真）；
});
.nc类型{
背景：$U 2；
边框：1px实心$branding_3；
填充：8rem 4rem；
填充底部：0；
边界底部：0；
}
.nc选项{
背景：#243447；
填充：2rem；
边框：1px实心$branding_3；
边缘底部：4rem；
过渡：0.3s缓解所有；
}
.主动{
背景：红色！重要；
}

选择1
选择2


选择1


选择2


成功了！没有想到只检查它是否有课。这就成功了！没有考虑只检查它是否有类。
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);
  }
});

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