Question

我正在编写一个基本的网络应用程序，这里有一些列表元素，我需要能够点击每个周围的整个LI来选择其中的单选按钮，并且只保证我点击的那个被选中。我可以在.click回调中编写代码，但是如果我尝试从命名函数中调用相同的代码就会失败，我相信这与我正在使用的“this”引用有关，但我不能似乎解决了这个问题。

HTML

<ul> 
  <form id="healthCheckAge" name="healthCheckAge"> 
    <li> <input type="radio" name="eighteen" value="18-30" />18-30 </li> 
    <li> <input type="radio" name="thirtyone" value="31-45" />31-45 </li> 
    <li> <input type="radio" name="fourtysix" value="46-65" />46-65 </li> 
    <li> <input type="radio" name="sixtyfive" value="65+" />65+</li> 
  </form> 
</ul>

JavaScript是

function li_click(){
  //set the vars for the selectors
  var listInputs = $('#healthCheckAge li input');
  var clicked = listInputs.attr('name');
  //loop on all the li children to see if they match the clicked LI - if not ensure that they are unchecked and faded
  $(listInputs).each(function(index,Element){
    $(listInputs).attr('checked',false).parent().addClass('selected');
  });
  //set the radio button to checked and apply a style to it, while removing this from any other checked radio buttoon
  if($(listInputs).attr('name')==clicked){
    $(this).children().attr('checked','true').parent().removeClass('selected'); 
  } 
}

$('#healthCheckAge li').click(function(){
  li_click();                                 
});

我认为问题在于，当我调用最后一个条件语句时，'this'并不反映我需要的内容。

有什么想法吗？

Answer 1

只需将元素传递给函数：

function lol(element){
  //set the vars for the selectors
  var listInputs = $('#healthCheckAge li input');
  var clicked = listInputs.attr('name');
  //loop on all the li children to see if they match the clicked LI - if not ensure that they are unchecked and faded
  $(listInputs).each(function(index,Element){
    $(listInputs).attr('checked',false).parent().addClass('selected');
  });
  //set the radio button to checked and apply a style to it, while removing this from any other checked radio buttoon
  if($(listInputs).attr('name')==clicked){
    $(element).children().attr('checked','true').parent().removeClass('selected'); 
  } 
}
  $('#healthCheckAge li').click(function(){
    lol(this);                                
  });

在点击处理程序中，this引用该元素，但在lol内，它指向函数的所有者，即全局window对象。

Answer 2

您可以使用call将lol（）的范围绑定到jQuery设置的“this”，这是一个可用于所有函数的方法：

$('#healthCheckAge li').click(function(){
    lol.call(this);                                
});

请参阅https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call

Answer 3

最简单的方法是让你的功能保持原样：

$('#healthCheckAge li').click( li_click );

现在this是接收事件的元素，如果需要，您仍然可以在函数中定义event参数。

这与将函数作为参数直接传递给click()方法完全相同。

jquery'this'用于函数问题

3 个答案: