0

私がやろうとしているフォームで私を助けてください。

ドロップダウン選択があり、<選択> のすべてのオプションに ID があります。たとえば、1 つのオプションには 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 );
?>

「レシピ」はドロップダウンの名前とIDです<選択>

現時点では、「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.

selectmootoolsで a の値を取得する正しい方法は次のとおりです。

$('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 el を検索するため、これはまだ効果的ではありません。

また、ID の使用をやめて、これをクラスに基づいてパターン化する必要があります。ID は適切にスケーリングされません。

于 2012-12-06T00:11:16.890 に答える