Question

我对jQuery有所了解，但这超出了我的知识。希望你能帮助我。

标题说明了一切;

如果id ='hot'的输入为：checked
然后addClass（'active'）到classset with class ='hot'
如果取消选择输入（已知道如何操作），则removeClass（'active'）

我的HTML：

<fieldset>

  <div class="item">
    <input name="drinks" id="hot" type="radio">
    <label for="hot">Hot</label>
  </div>

  <div class="item">
    <input name="drinks" id="cold" type="radio">
    <label for="cold">Cold</label>
  </div>

  <fieldset class="hot">

    <div class="item">
      <input name="hot" id="coffee" type="radio">
      <label for="coffee">Coffee</label>
    </div>

    <div class="item">
      <input name="hot" id="tea" type="radio">
      <label for="tea">Tea</label>
    </div>

  </fieldset>

</fieldset>

我的CSS：

fieldset > fieldset{
  display:none;
}

fieldset > fieldset.active{
  display:block;
}

Demo

提前致谢！

Answer 1

类似的东西：

$("#hot").change(function() {
    $("." + this.id).toggleClass("active");
});

Answer 2

我认为你的问题比你想的要大，所以：

$("input[type=radio]").bind('change.active',function(){
  $(".active").removeClass('active');
  if($(this).is(":checked")){
    $("."+this.id).addClass('active');
  }
});

由于id='hot'的元素是收音机，因此在更改其他收音机时需要小心移除活动元素。

希望有所帮助

Answer 3

因为我心情很好：

$("input[name='drinks']").change( function() {
    $("fieldset").children("fieldset").removeClass("active");
    var elem = "fieldset." + this.id;
    $( elem ).addClass( "active" );
});

另外，请检查此demo。

Answer 4

您的HTML无效。在不同的ID中使用相同的值被视为无效。
我更改了您的标记并添加了数据属性的使用（Read More）

使用Javascript：

lastElement = null

$("fieldset:eq( 0 ) > div input[type=radio]").on( "click", function() {
    // Assign $(this) to a var for a cleaner feel
    var t = $(this) 

    // Assign a var with the "data-id" value of the clicked input.
    var x = $(this).data("id");

    // Find a fieldset with a class named with whatever "x" var holds
    var y = $("fieldset\." + x);

    // If the lastElement is not null and is different from "t" ( $(this) ) 
    // Remove class active from the last fieldset. 
    if (typeof lastElement !== null && lastElement !== t) { $("fieldset\."+$(lastElement).data("id")).removeClass("active") } 

    if (t.is(':checked')) {
        // Assign lastElement to 't'
        lastElement = t

        $(y).addClass("active")
      }
});

标记：

<fieldset>

  <div class="item" id="drinks">
    <input name="drinks" data-id="hot" type="radio">
    <label for="hot">Hot</label>
  </div>

  <div class="item" id="drinks">
    <input name="drinks" data-id="cold" type="radio">
    <label for="cold">Cold</label>
  </div>

  <fieldset class="hot">

    <div class="item" id="coffee">
      <input name="hot" id="coffee" type="radio">
      <label for="coffee">Coffee</label>
    </div>

    <div class="item" id="tea">
      <input name="hot" id="tea" type="radio">
      <label for="tea">Tea</label>
    </div>

  </fieldset>

</fieldset>

这是我认为理想行为的一个工作小提琴。

http://jsfiddle.net/TG65v/1/

（逻辑的解释包含在JS片段中）

Answer 5

它不起作用，我的真实文件更复杂，'this'不起作用，因为我隐藏了它并使用label标签中的图像。此外，我的代码更长，并希望将其添加到更多的字段集。很抱歉我的问题不是很清楚。下面的代码对我有用，只需要繁殖几次即可。

$("input[name='drinks']").click(function(){
    $('fieldset.hot_drinks').addClass('active');
});

感谢您的回答！

如果选中input，则addclass active to fieldset，其class等于输入的id

5 个答案: