Question

我的HTML代码看起来像这样。（我有一个特殊的无线电输入设计）

<div class="area" id="area-1">
 <div class="input">
  <input type="radio" class="active-radio">
  <input type="radio" class="no-active-radio>
  <input type="radio" class="no-active-radio>
 </div>
</div>
<div class="area" id="area-2">
 <div class="input">
  <input type="radio" class="no-active-radio>
  <input type="radio" class="active-radio">
  <input type="radio" class="no-active-radio>
 </div>
</div>

当我点击“＃area-1”中的收音机时，我想删除“area-1”中其他收音机上的“active-radio”类，但不删除“area-2”中的“active-radio”。

有很多div .area所以我不想每次在我的脚本中指定div id。

JS：

var thisArea = this.closest(".area");
$(thisArea + " .input input[type='radio']").parent().removeClass('active-radio').addClass('no-active-radio');
$(this).addClass('active-radio').removeClass('no-active-radio');

基本上我想选择所有.input，其中包含与点击的收音机相同的.area中的无线电输入。

我认为问题来自这部分：

thisArea + " .input input[type='radio']"

Answer 1

您无法连接jQuery对象和字符串。使用.find()查找与选择器匹配的元素。此外，active-radio类不在单选按钮的父节点上，它位于单选按钮本身上，因此请勿使用.parent()。

thisArea.find(".input :radio").removeClass('active-radio').addClass('no-active-radio');

Answer 2

尝试这样：

$(thisArea)
  .find(".input input[type='radio']")
  .parent()
  .removeClass('active-radio')
  .addClass('no-active-radio');

Answer 3

将搜索范围限制为点击的元素。

＆＃13;

    {
          "query": {
            "bool": {
              "must": {
                "match_all": {}   
              },  
              "filter": [
                        {"script" : { "script" : "doc['counts'].values.size() < 4" }},
                         {"range": { "counts": { "gte": 10, "lte": 20 } }}
                        ]
                }
          }
 }

＆＃13;

{
  "took": 29,
  "timed_out": false,
  "_shards": {
    "total": 5,
    "successful": 5,
    "failed": 0
  },
  "hits": {
    "total": 2,
    "max_score": 1,
    "hits": [
      {
        "_index": "test_index",
        "_type": "test",
        "_id": "2",
        "_score": 1,
        "_source": {
          "counts": [
            13,
            17
          ]
        }
      },
      {
        "_index": "test_index",
        "_type": "test",
        "_id": "3",
        "_score": 1,
        "_source": {
          "counts": [
            11,
            19
          ]
        }
      }
    ]
  }
}

＆＃13;

Array
  .from(document.querySelectorAll('.area'))
  .forEach( a => a.addEventListener('click', clickFun, false) );


function clickFun(e) {
  Array
    .from(e.target.querySelectorAll('[type=radio]'))
    .forEach( a => {
      a.classList.toggle('no-active-radio');
      a.classList.toggle('active-radio');
    })
  };

＆＃13;

Answer 4

thisArea.find('input[type="radio"]').removeClass('active-radio');
$(this).addClass('active-radio');

*除非您在无线电输入上使用不同的css样式，并且在具有非活动类的无线电输入上使用不同的样式，否则没有使用非活动类的意义。只需添加和删除活动类，并将无活动类的样式直接添加到css中的输入[type =“radio']。

如何在jQuery中选择一个特殊的div

4 个答案: