0

我正在构建一个页面，该页面将包含几个选择框，这些框将根据所选值显示特定链接。我可以很好地显示/隐藏所有内容，但我知道我正在努力地做事。我对 JS/jQuery 还是很陌生，所以我不确定如何将我的脚本压缩为一个函数（我确信这是可能的）。

工作的jQuery：

$('.trqVerSelect').change(function () {
  $('.trqVersions .links').hide();
  $('.ver' + $(this).val()).show();
}).change();

$('.mwmVerSelect').change(function () {
  $('.mwmVersions .links').hide();
  $('.ver' + $(this).val()).show();
}).change();

这是一个 jsFiddle，表明上述方法有效。我不想要的是为页面上的每个选择框实例构建大量这些函数——其中将有 12 个左右。

我尝试了下面的代码，它有点工作，但每当你做一个新的选择时，它都会隐藏所有其他选择。我希望用户在不同的选择框中进行新选择时能够保留其他选择。

$('select').change(function () {
  $('.links').hide();
  $('.ver' + $(this).val()).show();
}).change();
4

2 回答 2

1

这似乎有效，http://jsfiddle.net/paGhk/1/

$('select').change(function () {
  $(this).parent().next().children().hide().filter(".ver" + $(this).val()).show();
}).change();

解释：

$('select').change(function () {
  $(this)  // <select />
    .parent() // <div />
    .next()  // <div />
    .children() // <p /><p />
    .hide() // hide them both
    .filter(".ver" + $(this).val()) // select the one with correct ver class
    .show(); // show it
}).change();
于 2013-01-10T20:08:31.357 回答
1

无需更改您的 HTML 结构或使用额外的类（就像我在此答案的先前版本中所做的那样），您可以执行以下操作：

$('.component').each(function(){
  var $component = $(this);
  $component.find('select').on('change', function(){
    $component.find('.links').hide();
    $component.find('.ver' + $(this).val()).show();
  }).change();
});

工作演示：http: //jsfiddle.net/Rykus0/paGhk/4/

于 2013-01-10T20:27:37.057 回答