javascript - 'click' 循环中的 'each' 函数问题

Question

基本上，我有多个带有“列表”类的 UL。他们每个人都有多个单选按钮。我想在检查单个 UL 的最后一个 radio 选项时对 span 元素做一些事情。并在选中同一 UL 的另一个单选按钮后撤消它。

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

我使用 alert(已注释掉)来检查我是否通过“each”获得了所有信息，它似乎工作正常。

$(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
      }
    });
  });
});

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

Answer 1

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

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

注意 1: 输入是自闭合标签，所以 thsy 应该是这样的:

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