0

请帮我填写我正在尝试做的表格。

我有一个下拉选择，<select> 中的所有选项都有 ID，例如：一个选项有 id="hide_me"，另一个选项有 id="hide_none"。

这是我为表单提供的 JS：

<?php
$script = "window.addEvent('domready', function() {
$('recipe').addEvent('change', function(event) {
  if ( $('recipe')document.getElementById('hide_it').selected === true ) {
     $('hide_me1').setStyle('opacity', '1');
     $('hide_me2').setStyle('opacity', '1');
  }
});
$('recipe').addEvent('change', function(event) {
  if ( $('recipe')document.getElementById('hide_none').selected === true ) {
     $('hide_me1').setStyle('opacity', '0');
     $('hide_me2').setStyle('opacity', '0');
  }
});
});
";
$doc =&JFactory::getDocument();
$doc->addScriptDeclaration( $script );
?>

“recipe”是下拉列表的名称和 ID < select >

目前它给了我一个像“SyntaxError：Unexpected identifier”这样的JS错误，有人可以帮我解决这个问题吗

4

1 回答 1

2

您生成的 js 如下所示：

window.addEvent('domready', function() {
    $('recipe').addEvent('change', function(event) {
        if ($('recipe') document.getElementById('hide_it').selected === true) {
            $('hide_me1').setStyle('opacity', '1');
            $('hide_me2').setStyle('opacity', '1');
        }
    });
    $('recipe').addEvent('change', function(event) {
        if ($('recipe') document.getElementById('hide_none').selected === true) {
            $('hide_me1').setStyle('opacity', '0');
            $('hide_me2').setStyle('opacity', '0');
        }
    });
});

如果你使用 jslint / jshint 之类的东西，甚至粘贴到 jsfiddle 并按下 jslint 按钮，它会立即报告问题。

然而：

$('recipe') document.getElementById('hide_it').selected === true)没有意义。我猜您正在尝试读取 ID 为 hide_it 的选项，它是配方的子项？

这是错误的做法，但这将是这样的：

$('recipe').getElement('#hide_it').get('selected'); // pointless as by id alone is faster and id is meant to be unique
document.getElement('#receipe #hide_id').get('selected'); // also pointless like above, alt syntax that allows you to combine selectors.
$('hide_it').get('selected'); // works but also wrong, not how you work with selects.

使用 mootools获取 a 值的正确方法select很简单：

$('receip').addEvent('change', function(){
    // within this function, this === $('recipe');
    var opacity = this.get('value') === 'hide_it' ? 1 : 0;
    $$('#hide_me1,#hide_me2').setStyle('opacity', opacity);

    // w/o a reference you could do in a single line:
    $$('#hide_me1,#hide_me2').setStyle('opacity', +(this.get('value') == 'hide_it'));
});

这仍然有些无效，因为当它们可能是静态的时，它会在每个更改事件中查找 2 个 hide_me els。

您还应该停止使用基于类的 id 和模式，id 不能很好地扩展。

于 2012-12-06T00:11:16.890 回答