動態變化的元素風格 - 的Joomla ChronoForms

Question

請幫我一個形式，我試圖做的。

我有一個下拉選擇，< 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); 
?> 

「祕方」這個名字，並且下拉<的ID選擇>

在它給了我一個JS錯誤，如瞬間「語法錯誤：意外的標識」，能有人幫我請與本

Answer 1

你產生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. 

正確的方式來獲得select與MooTools的價值將會更加簡單：

$('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埃爾斯的每一個變化的事件時，他們很可能是靜態的。

你也應該停止使用IDS，這根據各地類模式，IDS不能很好地擴展。