我只是想简化我的Jquery代码。我有下一个代码:
jQuery( '.audioEnhancedHelp-opener' ).click(function() {
jQuery( '.audioEnhancedHelp').dialog( 'open' );
});
jQuery( '.narrationHelp-opener' ).click(function() {
jQuery( '.narrationHelp' ).dialog( 'open' );
});
jQuery( '.studentcodeHelp-opener' ).click(function() {
jQuery( '.studentCodeHelp' ).dialog( 'open' );
});
并且希望为每个具有类型“* Help-opener”的特定类的按钮使用通用标签来打开特定对话框。像这样:
jQuery( '.LABELHelp-opener' ).click(function() {
jQuery( '.LABELHelp' ).dialog( 'open' );
});
我对Jquery的了解很差,我找不到谷歌的答案。有没有办法实现这个目标?
提前致谢, 塞尔吉奥
答案 0 :(得分:0)
我认为这符合您的基本要求:
jQuery('*[class *= "Help-opener"]' ).click(function() {
var cssClass = $(this).attr("class");
var helper = cssClass.substring(0, cssClass.length-11);
jQuery( '.' + helper + 'Help').dialog('open');
});
请注意,这不会处理您针对要点击的元素有多个类的情况。您可能需要考虑使用特定于此类按钮的CSS类,然后将该对话框存储在另一个属性中(例如,' data-dialog');这使代码变得更加简单。
答案 1 :(得分:0)
看看the selectors you can use。特别是contains。
所以基本上找到所有将“Help-opener”作为一个类的元素。然后你需要爆炸类“studentcodeHelp-opener”,用“ - ”作为分隔符。然后,您可以获取“studentcodeHelp”名称。
但是,我建议将目标放在另一个属性中,例如data-target
,这样可以简化解析位。例如:
<div class="Help-opener studentcodeHelp-opener" data-target="studentcodeHelp"> [... ] </div>
<div class="Help-opener narrationHelp-opener" data-target="narrationHelp"> [... ] </div>
然后是那个的JS:
$(function() {
$('div.Help-opener').click(function() {
$('.' + $(this).attr('data-target')).dialog('open')
}
});