javascript - 使用 JS 动态改变元素样式 - Joomla ChronoForms

Question

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

我有一个下拉选择，中的所有选项都有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 >目前它给了我一个 JS 错误，例如“SyntaxError:意外的标识符”，有人可以帮我解决这个问题 最佳答案 你生成的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的子项？这样做是错误的，但这会是这样的: $('recipe').getElement('#hide_it').get('selected'); // pointless as by id alone is faster and id is meant to be uniquedocument.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 获取 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 。 您还应该停止使用 ids 并基于类进行模式化，ids 不能很好地扩展。 关于javascript - 使用 JS 动态改变元素样式 - Joomla ChronoForms，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13731857/ 上一篇：javascript - DrawImage 不会在第一帧加载 下一篇：javascript - 在 d3js 中为该元素设置动画 相关文章： mysql - Joomla安装错误INSTL_ERROR_INITIALISE_SCHEMA javascript - YUI Compressor 的命令行选项 javascript - 突出显示节点及其邻居不与另一个不透明度过滤器同步工作 javascript - 当灯箱处于事件状态时使页面停止滚动 javascript - 如何在parsley js中动态添加验证约束 javascript - 如何使用 AJAX、计算字段、可排序列、粘贴等创建 SlickGrid？ php - Joomla 2.5 - 通过API进行多数据库查询 php - Joomla 使用 JInput 检查空字符串 javascript - 在 jCarousel 中允许三个以上的元素 jquery - 如果字体样式为斜体，IE7 在 slideToggle 上失败？ ©2023 IT工具网  联系我们