在HTML中预定义jquery变量

时间:2018-09-01 17:21:32

标签: javascript jquery html

我正在尝试从无线电组中进行选择,并在页面加载时将其属性设置为jquery变量。我希望最初通过html预选此电台。

HTML:

 <div style="background-color:blue;" class="radio" data-value="option1"></div>
      <div style="background-color:green;" class="radio" data-value="option2"></div>
      <div style="background-color:black;" class="radio selected" data-value="option3"  checked="checked" ></div>
       <div style="background-color:orange;" class="radio"  data-value="option4"></div>

jQuery:

$('.radio').click(function() {
    /*$('.selected').removeClass('selected');*/
    $(this).addClass('selected');

     val = $(this).attr('data-value');
});

此jQuery行为完全正确,单击div时,它将全局变量“ var”设置为数据值。

但是,当未单击任何内容时,变量为“未定义”。我在第三个选项中添加了“ selected”类,但它仅将css样式应用于选择项,并且没有像我希望的那样将变量val设置为“ option3”。

总而言之,我只想在html中添加具有“ selected”类的单选按钮,以便将元素的数据值设置为“ val”变量。

谢谢你!

编辑1:

此外,我希望该预选变量能够重置为该变量。例如,如果最初将其设置为option3,则用户单击选项4(很好),然后单击on.mouseleaves函数,以使变量返回到预选的“ option3”。我需要做到这一点,而不必直接在jquery中定位option3,只是为了使事件将变量“重置”为预选选项。

2 个答案:

答案 0 :(得分:0)

有了它,它应该可以工作:

- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize
{


  ASStackLayoutSpec *stack = [[ASStackLayoutSpec alloc] init];
  if (self.buttonState == SignupNodeName) {
    [stack setChildren:@[field, self.buttonNode, self.newNode]];
  } else {
    [stack setChildren:@[field, self.buttonNode]];
  }


  UIEdgeInsets insets = UIEdgeInsetsMake(15.0, 15.0, 15.0, 15.0);
  return [ASInsetLayoutSpec insetLayoutSpecWithInsets:insets child:stack];
}

您上面的代码未定义变量的原因是,仅当您单击$(document).ready(function(){ var val = $('.selected').attr('data-value') // rest of jquery code.. }) div时才会触发。

编辑:

为响应您的编辑,我会做类似的事情。请注意,通过ID标识每个电台div:

.radio

答案 1 :(得分:0)

您要做的是为when the document is ready注册一个事件处理程序,然后以与获取所有单选按钮相同的方式在其上注册一个事件处理程序,您将希望获取所有具有selected属性(在这种情况下,页面加载时总是只有一个具有该属性的属性),并以与您相同的方式将其data-value属性的值设置为全局变量val在您的示例中完成了单击单选按钮时的操作。

$(document).ready(function() {
    val = $('radio.selected').attr('data-value');
});

^假设您已经在全局范围内定义了val

我希望这会对您有所帮助。