Question

我确定这只是一个简单的问题，但它现在让我难以理解几个不同的项目..我必须继续声明我的变量，我确信有更好的方法可以做事。

在下面的示例中，我发现“#gender”阶段“性别”打印正常，但“#age”阶段“性别”已不再定义＆amp; /或未被执行到另一个功能。

一个例子：

var gender;
var age;
var children;


$('#gender li:contains(Male)').click(function() {
  gender = "male";
  $('#age').show();
  $('span.jquery_out').text(gender);
});
$('#gender li:contains(Female)').click(function() {
gender = "female";
$('#age').show();
$('span.jquery_out').text(gender);
});

$('#age li:contains(1)').click(function() {
  var age = "1";
  $('#children').show();
  $('span.jquery_out').text(gender+" -> "+age);
});
$('#age li:contains(2)').click(function() {
  var age = "2";
  $('#children').show();
  $('span.jquery_out').text(gender+" -> "+age);
});
$('#age li:contains(3)').click(function() {
  var age = "3";
  $('#children').show();
  $('span.jquery_out').text(gender+" -> "+age);
});
$('#age li:contains(4)').click(function() {
  var age = "4";
  $('#children').show();
  $('span.jquery_out').text(gender+" -> "+age);
});
$('#age li:contains(5)').click(function() {
  var age = "5";
  $('#children').show();
  $('span.jquery_out').text(gender+" -> "+age);
});

希望有人得到答案，我确信在知情时它不是一个棘手的问题。提前致谢。马特

Answer 1

我不知道你的标记是什么样的，但你的jQuery可以大大简化。

在我继续之前，值得注意的是，你所拥有的基本上是表单字段，但你正在使用它们的列表。这远非理想，我建议使用列表框（选择）或单选按钮，然后设置它们以适应。有很多jQuery插件用于修改Fancy Radio Buttons With jQuery等表单项（参见demo）。

然后：

<div id="gender">
  <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female
</div>
<span class="jquery_out"></span>

不是使用:contains()和多个选择器，而是更容易做到：

var gender;
var age;
$("#gender :radio").click(function() {
  gender = $(this).val();
  update();
});

function update() {
  var text = gender || "";
  if (text.length > 0) {
    text += " -> ";
  }
  text += age || "";
  $("span.jquery_out").text(text);
}

年龄标记和代码大致相同。

Answer 2

听起来你需要做的是规范你的数据在你的html中的位置并制作你的功能以便你可以找到它：

var gender;
var age;
var children;
$('#gender li').click(function() {
    gender = $(this).text(); //or some other selection to find the value
    $('#age').show();
    $('span.jquery_out').text(gender);
});
$('#age li').click(function() {
    age = $(this).text(); //or some other selection to find the value
    $('#children').show();
    $('span.jquery_out').text(gender+" -> "+age);
});

Answer 3

尝试这种风格，无需变量：

$('#gender li').click(function() {
  $(this).addClass("selected").siblings().removeClass("selected");
  $('#age').show();
  $('span.jquery_out').text($(this).text());
});
$('#age li').click(function() {
  $(this).addClass("selected").siblings().removeClass("selected");
  $('#children').show();
  $('span.jquery_out').text($("#gender li.selected").text() + " -> " + $(this).text());
}

你只是指定一个CSS类来跟踪，如果你想要它的样式以表明它被选中，可以做到这一点。

解析函数jquery中的变量

3 个答案: