Question

基本上，我有多个UL＆＃34;列表＆＃34;。他们每个人都有多个单选按钮。我想在检查单个UL的最后一个无线电选项时使用span元素做一些事情。并且在检查相同UL的另一个单选按钮之后撤消它。

代码本质上有效，但它触发所有UL而不是发生点击的UL。

我使用了警报（已注释掉）来检查我是否已经使用了每个＆＃39;每个＆＃39;它似乎工作正常。

＆＃13;

$(document).ready(function() {
  $('ul.list').each(function() {
    //alert($(this).text());
    $("ul.list input[type$='radio']").click(function() {
      if ($("li:last-of-type input[type$='radio']").prop("checked")) {
        // do something with span
      } else {
        // do something with span
      }
    });
  });
});

＆＃13;

<ul class="list">
  <li><input type="radio">Option 1</input>
  </li>
  <li><input type="radio">Option 2</input>
  </li>
  <li><input type="radio">Bonus</input><span>Bonus text</span></li>
</ul>

<ul class="list">
  <li><input type="radio">Option 1</input>
  </li>
  <li><input type="radio">Option 2</input>
  </li>
  <li><input type="radio">Bonus</input><span>Bonus text</span></li>
</ul>

＆＃13;

Answer 1

实际上，在这种情况下你不需要循环只需将点击直接附加到选择器：

$(document).ready(function() {
  $("ul.list :radio").click(function() {
    if ( $(this).prop("checked") ) 
    {
      // do something with span
    } else {
      // do something with span
    }
  });
});

注意1：输入是自动关闭的标签，所以这应该是：

<input type="radio"/>Option 1

而不是：

<input type="radio">Option 1</input>

注意2：使用this关键字来定位点击的元素：

if( $(this).prop("checked") ){

希望这有帮助。

$(document).ready(function() {
  $("ul.list :radio").change(function() {
    if ( !$(this).is(':last-child') && $(this).is(":checked") ) 
    {
      $(this).closest("ul").find('span').show();
    }else{
      $(this).closest("ul").find('span').hide();
    }
  });
});

ul.list li>span{
   display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="list">
  <li><input type="radio" name="same_name_1" checked/>Option 1</li>
  <li><input type="radio" name="same_name_1" />Option 2</li>
  <li><input type="radio" name="same_name_1" />Bonus<br><span>Bonus text</span></li>
</ul>

<ul class="list">
  <li><input type="radio" name="same_name_2" checked/>Option 1</li>
  <li><input type="radio" name="same_name_2" />Option 2</li>
  <li><input type="radio" name="same_name_2" />Bonus<br><span>Bonus text</span></li>
</ul>

问题＆＃39;点击＆＃39;功能在＆＃39;每个＆＃39;环

1 个答案: